成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS魔法堂：稍稍深入偽類選擇器

tanglijun / 852人閱讀

摘要：前言過(guò)去零零星星地了解和使用和等偽類偽元素選擇器，最近看書時(shí)發(fā)現(xiàn)這方面有所欠缺，于是決定稍微深入學(xué)習(xí)一下，以下為偽類部分的整理。偽類偽類選擇器實(shí)質(zhì)上是讓設(shè)計(jì)師可以根據(jù)元素特定的狀態(tài)，設(shè)置不同的視覺(jué)效果。也就是符合以下選擇器的元素均支持狀態(tài)。

前言

?過(guò)去零零星星地了解和使用:link、::after和content等偽類、偽元素選擇器，最近看書時(shí)發(fā)現(xiàn)這方面有所欠缺，于是決定稍微深入學(xué)習(xí)一下，以下為偽類部分的整理。

偽類

?偽類選擇器實(shí)質(zhì)上是讓設(shè)計(jì)師可以根據(jù)元素特定的狀態(tài)，設(shè)置不同的視覺(jué)效果。具體有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。

HTMLAnchorElement的4大經(jīng)典偽類

:link，用于設(shè)置鏈接初始狀態(tài)時(shí)的樣式;

:visited，用于設(shè)置鏈接被點(diǎn)擊過(guò)后的樣式;

:hover，用于設(shè)置鼠標(biāo)懸停在鏈接上方時(shí)，鏈接的樣式;

:active，用于設(shè)置鼠標(biāo)按鍵按下，但未釋放時(shí)，鏈接的樣式。

?想必各位都和我一樣，最初接觸到的就是上述4個(gè)偽類了吧？！而且還死機(jī)硬背它們的設(shè)置順序(LVAH)吧，哈哈。

設(shè)置當(dāng)前目標(biāo)元素樣式

?還記得URL中的井號(hào)嗎？從井號(hào)(#)開(kāi)始到URL的末尾稱為URL的hash或fragment，用于定位頁(yè)面內(nèi)某項(xiàng)資源。假設(shè)現(xiàn)在頁(yè)面存在

Target

的元素，那么只要地址欄輸入#title瀏覽器就會(huì)不斷滾動(dòng)(滾動(dòng)不一定存在補(bǔ)間動(dòng)效)直到元素h3#title位于可視區(qū)的特定位置。（注意：請(qǐng)不要和UI Routing混為一談）
?而上述這個(gè)被定位的頁(yè)面資源，被稱為目標(biāo)元素或當(dāng)前活動(dòng)元素！可通過(guò):target設(shè)置其樣式。
?兼容性：IE9開(kāi)始支持。

示例：

// 當(dāng)前URL為http://foo.com#1
:target {
    color: red;
}
.title{
    color: blue;
    
    &:target{
        border: solid 1px red;
    }
}

.title{I"m not target element.}
.title#1{Yes, I"m.}
設(shè)置元素獲得焦點(diǎn)時(shí)的樣式

:focus用于設(shè)置元素處于focus狀態(tài)下的樣式。
兼容性：IE8開(kāi)始支持。
那么哪些元素支持focus狀態(tài)呢？那要先弄清楚通過(guò)哪些操作可能實(shí)現(xiàn)focus。
它們分別是：

鼠標(biāo)點(diǎn)擊;

Tab鍵;

通過(guò)JavaScript的HTMLElement.prototype.focus()方法。

那么傳統(tǒng)上支持focus狀態(tài)的元素必定是a、button、input、select和textareas.
而HTML5中增加當(dāng)元素設(shè)置了contenteditable或tabindex屬性時(shí)，該元素支持focus狀態(tài)。
也就是符合以下選擇器的元素均支持focus狀態(tài)。

a,button,input,select,textarea,[contenteditable],[tabindex]

注意：若tabindex屬性值小于0，則無(wú)法通過(guò)Tab鍵獲得焦點(diǎn)。但可以通過(guò)鼠標(biāo)點(diǎn)擊 或 腳本時(shí)元素獲得焦點(diǎn)。

JS獲取當(dāng)前得到焦點(diǎn)的元素 
/* 
 * 加載完成時(shí)默認(rèn)返回body
 * 若某元素獲得焦點(diǎn)時(shí)，則返回該元素
 */
document.activeElement :: HTMLElement

另外還有一個(gè)讓人誤會(huì)的屬性

// 用于檢測(cè)文檔是否得到焦點(diǎn)，即用戶是否正在與頁(yè)面交互
// 頁(yè)面僅僅位于屏幕可視區(qū)域，而用戶沒(méi)有與之交互時(shí)返回false。
document.hasFocus :: Void -> Boolean
設(shè)置子元素獲得焦點(diǎn)時(shí)，該元素的樣式

:focus-within，用于設(shè)置當(dāng)子元素處于focus狀態(tài)時(shí)，該元素的樣式。
兼容性:Chrome63開(kāi)始支持。

示例：二次確認(rèn)密碼時(shí)，密碼框高亮

.form-control{
  &:focus-within > input{
    &:focus {
      border: solid 1px skyblue;
    }
    
    &:not(:focus){
      border: solid 1px orange;
    }
  }
}

.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]
其他

:root，用于設(shè)置元素的樣式，從IE9開(kāi)始支持。

:checked，用于設(shè)置單選和復(fù)選控件被選中的樣式，從IE9開(kāi)始支持。結(jié)合偽元素::before和content屬性可以實(shí)現(xiàn)靈活高效的自定義單選和復(fù)選控件。

:empty，用于設(shè)置沒(méi)有子節(jié)點(diǎn)的元素的樣式。div{ }為存在TEXT_NODE子節(jié)點(diǎn)的元素，而div{}則為沒(méi)有子節(jié)點(diǎn)的元素。

:not，作為謂語(yǔ)表達(dá)取反的語(yǔ)義。

:placeholder-shown，用于設(shè)置元素placeholder顯示時(shí)的樣式。

總結(jié)

尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)自：https://www.cnblogs.com/fsjoh... ^_^肥仔John

參考

https://css-tricks.com/almana...
https://www.zhangxinxu.com/wo...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113830.html

相關(guān)文章

  • CSS魔法堂：一起玩透?jìng)卧睾虲ontent屬性

    摘要：前言繼上篇魔法堂稍稍深入偽類選擇器記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦。和的注意事項(xiàng)默認(rèn)必須設(shè)置屬性，否則一切都是無(wú)用功默認(rèn)，就是和的內(nèi)容無(wú)法被用戶選中的偽元素和偽類結(jié)合使用形如。 前言 ?繼上篇《CSS魔法堂：稍稍深入偽類選擇器》記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦^_^。本文講講述偽元素以及功能強(qiáng)大的Contet屬性，讓我們可以通過(guò)偽元素更好地實(shí)現(xiàn)更多的可能！ ...

    DevTalking 評(píng)論0 收藏0

  • CSS魔法堂：重拾Border之——更廣闊的遐想

    摘要：也就是說(shuō)我們操作的幾何公式中的未知變量，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設(shè)計(jì)師幫忙。 前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)border-top-left/right-radius的水平半徑之和大于元素寬度時(shí)，實(shí)際值會(huì)按比...

    lily_wang 評(píng)論0 收藏0

  • CSS魔法堂：重拾Border之——解構(gòu)Border

    摘要：本系列將稍微深入探討一下那個(gè)貌似沒(méi)什么好玩的魔法堂重拾之解構(gòu)魔法堂重拾之圖片作邊框魔法堂重拾之不僅僅是圓角魔法堂重拾之更廣闊的遐想解構(gòu)說(shuō)起我們自然會(huì)想起，而由條緊緊包裹著的邊組成，所以的最小操作單元是。 前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)...

    lingdududu 評(píng)論0 收藏0

  • CSS魔法堂：小結(jié)一下Box Model與Positioning Scheme

    摘要：魔法堂重新認(rèn)識(shí)和魔法堂你一定誤解過(guò)的魔法堂就這個(gè)樣魔法堂說(shuō)說(shuō)那個(gè)被埋沒(méi)的志向深入細(xì)節(jié)后會(huì)發(fā)現(xiàn)中定位模式之間，和之間存在千絲萬(wàn)縷的關(guān)系，必須以俯瞰的角度捋一下。當(dāng)采用時(shí)，屬性的實(shí)際值會(huì)被重置為。由于和則需要通過(guò)來(lái)引入來(lái)提供盒子定位微調(diào)的功能。 前言 ?對(duì)于Box Model和Positioning Scheme中3種定位模式的細(xì)節(jié)，已經(jīng)通過(guò)以下幾篇文章記錄了我對(duì)其的理解和思考。?《CSS...

    szysky 評(píng)論0 收藏0

  • CSS魔法堂：display:none與visibility:hidden的恩怨情仇

    摘要：不耽誤表單提交數(shù)據(jù)雖然我們無(wú)法看到的元素，但當(dāng)表單提交時(shí)依然會(huì)將隱藏的元素的值提交上去。讓元素在見(jiàn)面上不可視，但保留元素原來(lái)占有的位置。不過(guò)由于各瀏覽器實(shí)現(xiàn)效果均有出入，因此一般不會(huì)使用這個(gè)值。繼承父元素的值。 前言 ?還記得面試時(shí)被問(wèn)起請(qǐng)說(shuō)說(shuō)display:none和visibility:hidden的區(qū)別嗎？是不是回答完display:none不占用原來(lái)的位置，而visibilit...

    selfimpr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<