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

資訊專(zhuān)欄INFORMATION COLUMN

我對(duì)CSS選擇器的認(rèn)識(shí)

李世贊 / 3431人閱讀

摘要：還有兩個(gè)選擇器是功能性的，它們可以給元素已有內(nèi)容之前或之后添加新內(nèi)容。我做了一個(gè)項(xiàng)目，里面包含一個(gè)測(cè)試選擇器的小功能，請(qǐng)看這里。二歸納下文中所有的都代表任何一個(gè)有效的選擇器。

我對(duì)CSS選擇器的認(rèn)識(shí)

一、簡(jiǎn)述　　

　　CSS選擇器是對(duì)HTML元素進(jìn)行選擇的篩選條件，大概可以分為兩類(lèi)：

  1. 特征選擇器——根據(jù)元素自身所具有的某種特征進(jìn)行篩選，比如名稱(chēng)、ID、屬性等；
  2. 關(guān)系選擇器——根據(jù)元素與其他元素的關(guān)系進(jìn)行篩選，比如子元素、兄弟元素等；

　　在真正使用的時(shí)候，幾個(gè)簡(jiǎn)單的選擇器可以組合成更復(fù)雜的選擇器，所以誰(shuí)也說(shuō)不上CSS選擇器有多少。還有兩個(gè)選擇器是功能性的，它們可以給元素已有內(nèi)容之前或之后添加新內(nèi)容。　

　　我做了一個(gè)項(xiàng)目，里面包含一個(gè)測(cè)試CSS選擇器的小功能，請(qǐng)看這里。

二、歸納

　　下文中所有的?SELECTOR?都代表任何一個(gè)有效的選擇器。

　　1. 特征選擇器：

描述 選擇器 備注
1. 無(wú)論有什么特征——即全部 ?* { }? ?
2. 元素名稱(chēng)是 "element" ?element { }? ?
3.?具有類(lèi)名 "className" ?.className { }? ?
4.?具有id名 "someID" ?#someID { }? ?
5.?帶有屬性? attr ?SELECTOR[attr] { }? ?
6.?帶有屬性 attr，且屬性值為 "value" ?SELECTOR[attr="value"] { }? ?
7. 帶有屬性 attr，且其若干個(gè)屬性值中有一個(gè)是 "value" ?SELECTOR[attr~="value"] { }? ?
8. 帶有屬性 attr，且其屬性值包含字符串 "str" ?SELECTOR[attr*="str"] { }? ?
9. 鼠標(biāo)正位于其上方 ?SELECTOR:hover { }? ?
10. SELECTOR 是個(gè)獨(dú)生子——它的父元素只有它這一個(gè)子元素 ?SELECTOR:only-child { }? ?
11. SELECTOR 是其父親的第一個(gè)子元素 ?selector:first-child { }? ?
12.?SELECTOR 是其父親的第 N 個(gè)子元素 ?selector:nth-child(N) { }? ?
13.?SELECTOR 是其父親的最后一個(gè)子元素 ?selector:last-child { }? ?
14. SELECTOR 內(nèi)部是真空——連空格都沒(méi)有 ?SELECTOR:empty { }? ?
15. SELECTOR 被某個(gè)鏈接錨定了，而且該鏈接被點(diǎn)擊了 ?SELECTOR:target { }? <a href="#topic">跳轉(zhuǎn)到 SELECTOR 處a>
16. SELECTOR 中被用戶(hù)通過(guò)鼠標(biāo)拖動(dòng)選中的內(nèi)容 ?SELECTOR::selection { }? ?
鏈接專(zhuān)有的特征
17. 未被訪問(wèn)的鏈接 ?a:link { }? ?
18. 已被訪問(wèn)的鏈接 ?a:visited { }? ?
19. 正在被點(diǎn)擊的鏈接 ?a:active { }? ?
表格元素專(zhuān)有的特征
20. 目標(biāo)是啟用的 ?SELECTOR:enabled { }? ?
21. 目標(biāo)是禁用的 ?SELECTOR:disabled?{ }? ?
22. 目標(biāo)是被選中的（單選框、復(fù)選框） ?SELECTOR:checked?{ }? ?
23. 目標(biāo)獲得了焦點(diǎn) ?SELECTOR:focus { }? 能接收用戶(hù)輸入的元素，當(dāng)它正在接收時(shí)，就獲得了焦點(diǎn)。
兩個(gè)功能性選擇器
24. 給 SELECTOR 的內(nèi)容之前加上些東西 ?SELECTOR:before { }? ?
25.?給 SELECTOR 內(nèi)容之后加上些東西 ?SELECTOR:after { }? ?

　　2. 關(guān)系選擇器

描述 選擇器 備注
1. SELECTOR1 和 SELECTOR2 ?SELECTOR1, SELECTOR2 { }? ?
2.?位于 SELECTOR1 之后的所有兄弟元素 SELECTOR2 ?SELECTOR1~SELECTOR2 { }? ?
3.?與 SELECTOR1 緊鄰著的 SELECTOR2 元素 ?selector1+selector2 { }? ?
4.?SELECTOR 的首字母 ?selector:first-letter { }? 類(lèi)似的還有??SELECTOR:first-line { }?
5.?SELECTOR1 的所有子元素 SELECTOR2 ?selector1>selector2 { }? ?
6.?SELECTOR1 的所有后代元素 SELECTOR2 ?selector1 selector2 { }? ?
7. 所有不是 SELECTOR2 的 SELECTOR1 ?SELECTOR1:not(SELECTOR2) { }? ?

　　個(gè)人淺薄之見(jiàn)，肯定有不到之處，希望得到有心之人指正，謝謝！

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

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

相關(guān)文章

  • CSS: hover選擇器的使用

    摘要：有些時(shí)候需要用到和這兩個(gè)鼠標(biāo)事件，但是寫(xiě)又比較麻煩，還要添加監(jiān)聽(tīng)事件，所以能用解決的東西盡量解決，這樣可以提高性能，下面說(shuō)一下我對(duì)的了解之前在學(xué)計(jì)算機(jī)應(yīng)用的時(shí)候，老師教我們使用了選擇器來(lái)完成下拉菜單，之前只知道怎么使用，并不知道為什么要這么 有些時(shí)候需要用到mouseover和mouseout這兩個(gè)鼠標(biāo)事件，但是寫(xiě)js又比較麻煩，還要添加監(jiān)聽(tīng)事件，所以能用css解決的東西盡量yongc...

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

  • CSS: hover選擇器的使用

    摘要：有些時(shí)候需要用到和這兩個(gè)鼠標(biāo)事件，但是寫(xiě)又比較麻煩，還要添加監(jiān)聽(tīng)事件，所以能用解決的東西盡量解決，這樣可以提高性能，下面說(shuō)一下我對(duì)的了解之前在學(xué)計(jì)算機(jī)應(yīng)用的時(shí)候，老師教我們使用了選擇器來(lái)完成下拉菜單，之前只知道怎么使用，并不知道為什么要這么 有些時(shí)候需要用到mouseover和mouseout這兩個(gè)鼠標(biāo)事件，但是寫(xiě)js又比較麻煩，還要添加監(jiān)聽(tīng)事件，所以能用css解決的東西盡量yongc...

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

  • 編寫(xiě)高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類(lèi)選擇器比如。選擇器和類(lèi)選擇器在速度上的差異基本上沒(méi)有關(guān)系。現(xiàn)在我們回到討論開(kāi)始的地方，哪類(lèi)選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫(xiě)代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話(huà)題了，也不是我一個(gè)非得重拾的話(huà)題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話(huà)題。 有很多人都忘記了，或在簡(jiǎn)單的說(shuō)沒(méi)有意識(shí)...

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

  • 編寫(xiě)高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類(lèi)選擇器比如。選擇器和類(lèi)選擇器在速度上的差異基本上沒(méi)有關(guān)系?，F(xiàn)在我們回到討論開(kāi)始的地方，哪類(lèi)選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫(xiě)代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話(huà)題了，也不是我一個(gè)非得重拾的話(huà)題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話(huà)題。 有很多人都忘記了，或在簡(jiǎn)單的說(shuō)沒(méi)有意識(shí)...

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

  • 論 CSS 中的邏輯

    摘要：天生缺乏邏輯性的問(wèn)題導(dǎo)致了預(yù)處理器的出現(xiàn)。這會(huì)導(dǎo)致圈復(fù)雜度問(wèn)題。圈復(fù)雜度對(duì)于來(lái)說(shuō)可能是一種比較高階的原則，但如果我們通過(guò)它來(lái)考量那些蘊(yùn)含在我們寫(xiě)的選擇器中的邏輯性，那我們也許就能寫(xiě)出更加優(yōu)秀的代碼。 本文在征得原作者 @csswizardry 同意的情況下，翻譯自他博客中的文章：Cyclomatic Complexity: Logic in CSS。最初發(fā)布于我的個(gè)人博客：咀嚼之...

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

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

0條評(píng)論

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