国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

我對CSS選擇器的認識

李世贊 / 3432人閱讀

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

我對CSS選擇器的認識

一、簡述　　

　　CSS選擇器是對HTML元素進行選擇的篩選條件，大概可以分為兩類：

  1. 特征選擇器——根據元素自身所具有的某種特征進行篩選，比如名稱、ID、屬性等；
  2. 關系選擇器——根據元素與其他元素的關系進行篩選，比如子元素、兄弟元素等；

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

　　我做了一個項目，里面包含一個測試CSS選擇器的小功能，請看這里。

二、歸納

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

　　1. 特征選擇器：

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

　　2. 關系選擇器

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

　　個人淺薄之見，肯定有不到之處，希望得到有心之人指正，謝謝！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1903.html

相關文章

  • CSS: hover選擇器的使用

    摘要：有些時候需要用到和這兩個鼠標事件，但是寫又比較麻煩，還要添加監聽事件，所以能用解決的東西盡量解決，這樣可以提高性能，下面說一下我對的了解之前在學計算機應用的時候，老師教我們使用了選擇器來完成下拉菜單，之前只知道怎么使用，并不知道為什么要這么 有些時候需要用到mouseover和mouseout這兩個鼠標事件，但是寫js又比較麻煩，還要添加監聽事件，所以能用css解決的東西盡量yongc...

    Prasanta 評論0 收藏0

  • CSS: hover選擇器的使用

    摘要：有些時候需要用到和這兩個鼠標事件，但是寫又比較麻煩，還要添加監聽事件，所以能用解決的東西盡量解決，這樣可以提高性能，下面說一下我對的了解之前在學計算機應用的時候，老師教我們使用了選擇器來完成下拉菜單，之前只知道怎么使用，并不知道為什么要這么 有些時候需要用到mouseover和mouseout這兩個鼠標事件，但是寫js又比較麻煩，還要添加監聽事件，所以能用css解決的東西盡量yongc...

    joyvw 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...

    forrest23 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...

    hyuan 評論0 收藏0

  • 論 CSS 中的邏輯

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

    PiscesYE 評論0 收藏0

發表評論

0條評論

李世贊

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<