CSS選擇器詳細總結

時間  2019-11-30
標籤 css 選擇器 詳細 總結 欄目 CSS 简体版
原文   原文鏈接 
1、基本選擇器
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    1. 
    * 
    通用元素選擇器，匹配任何元素 
   
 
   
 
    2. 
    E 
    標籤選擇器，匹配全部使用E標籤的元素 
   
 
   
 
    3. 
    .info 
    class選擇器，匹配全部class屬性中包含info的元素 
   
 
   
 
    4. 
    #footer 
    id選擇器，匹配全部id屬性等於footer的元素 
   
 
  
 
 
 
 
實例：
* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }
2、多元素的組合選擇器
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    5. 
    E,F 
    多元素選擇器，同時匹配全部E元素或F元素，E和F之間用逗號分隔 
   
 
   
 
    6. 
    E F 
    後代元素選擇器，匹配全部屬於E元素後代的F元素，E和F之間用空格分隔 
   
 
   
 
    7. 
    E > F 
    子元素選擇器，匹配全部E元素的子元素F 
   
 
   
 
    8. 
    E + F 
    毗鄰元素選擇器，匹配全部緊隨E元素以後的同級元素F 
   
 
  
 
 
 
 
實例：
div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
div > strong { color:#f00; }
p + p { color:#f00; }
3、CSS 2.1 屬性選擇器
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    9. 
    E[att] 
    匹配全部具備att屬性的E元素，不考慮它的值。（注意：E在此處能夠省略，好比「[cheacked]」。如下同。） 
   
 
   
 
    10. 
    E[att=val] 
    匹配全部att屬性等於「val」的E元素 
   
 
   
 
    11. 
    E[att~=val] 
    匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」的E元素 
   
 
   
 
    12. 
    E[att|=val] 
    匹配全部att屬性具備多個連字號分隔（hyphen-separated）的值、其中一個值以「val」開頭的E元素，主要用於lang屬性，好比「en」、「en-us」、「en-gb」等等 
   
 
  
 
 
 
 
實例：
p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }
4、CSS 2.1中的僞類
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    13. 
    E:first-child 
    匹配父元素的第一個子元素 
   
 
   
 
    14. 
    E:link 
    匹配全部未被點擊的連接 
   
 
   
 
    15. 
    E:visited 
    匹配全部已被點擊的連接 
   
 
   
 
    16. 
    E:active 
    匹配鼠標已經其上按下、尚未釋放的E元素 
   
 
   
 
    17. 
    E:hover 
    匹配鼠標懸停其上的E元素 
   
 
   
 
    18. 
    E:focus 
    匹配得到當前焦點的E元素 
   
 
   
 
    19. 
    E:lang(c) 
    匹配lang屬性等於c的E元素 
   
 
  
 
 
 
 
實例：
p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }
5、 CSS 2.1中的僞元素
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    20. 
    E:first-line 
    匹配E元素的第一行 
   
 
   
 
    21. 
    E:first-letter 
    匹配E元素的第一個字母 
   
 
   
 
    22. 
    E:before 
    在E元素以前插入生成的內容 
   
 
   
 
    23. 
    E:after 
    在E元素以後插入生成的內容 
   
 
  
 
 
 
 
實例：
p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
a:link:after { content: " (" attr(href) ") "; }
6、CSS 3的同級元素通用選擇器
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    24. 
    E ~ F 
    匹配任何在E元素以後的同級F元素 
   
 
  
 
 
 
 
實例：
p ~ ul { background:#ff0; }
7、CSS 3 屬性選擇器
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    25. 
    E[att^=」val」] 
    屬性att的值以"val"開頭的元素 
   
 
   
 
    26. 
    E[att$=」val」] 
    屬性att的值以"val"結尾的元素 
   
 
   
 
    27. 
    E[att*=」val」] 
    屬性att的值包含"val"字符串的元素 
   
 
  
 
 
 
 
實例：
div[id^="nav"] { background:#ff0; }
8、CSS 3中與用戶界面有關的僞類
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    28. 
    E:enabled 
    匹配表單中激活的元素 
   
 
   
 
    29. 
    E:disabled 
    匹配表單中禁用的元素 
   
 
   
 
    30. 
    E:checked 
    匹配表單中被選中的radio（單選框）或checkbox（複選框）元素 
   
 
   
 
    31. 
    E::selection 
    匹配用戶當前選中的元素 
   
 
  
 
 
 
 
實例：
input[type="text"]:disabled { background:#ddd; }
9、CSS 3中的結構性僞類
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    32. 
    E:root 
    匹配文檔的根元素，對於HTML文檔，就是HTML元素 
   
 
   
 
    33. 
    E:nth-child(n) 
    匹配其父元素的第n個子元素，第一個編號爲1 
   
 
   
 
    34. 
    E:nth-last-child(n) 
    匹配其父元素的倒數第n個子元素，第一個編號爲1 
   
 
   
 
    35. 
    E:nth-of-type(n) 
    與:nth-child()做用相似，可是僅匹配使用同種標籤的元素 
   
 
   
 
    36. 
    E:nth-last-of-type(n) 
    與:nth-last-child() 做用相似，可是僅匹配使用同種標籤的元素 
   
 
   
 
    37. 
    E:last-child 
    匹配父元素的最後一個子元素，等同於:nth-last-child(1) 
   
 
   
 
    38. 
    E:first-of-type 
    匹配父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1) 
   
 
   
 
    39. 
    E:last-of-type 
    匹配父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type(1) 
   
 
   
 
    40. 
    E:only-child 
    匹配父元素下僅有的一個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1) 
   
 
   
 
    41. 
    E:only-of-type 
    匹配父元素下使用同種標籤的惟一一個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) 
   
 
   
 
    42. 
    E:empty 
    匹配一個不包含任何子元素的元素，注意，文本節點也被看做子元素 
   
 
  
 
 
 
 
實例：
p:nth-child(3) { color:#f00; }
p:nth-child(odd) { color:#f00; }
p:nth-child(even) { color:#f00; }
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
tr:nth-child(2n+11) { background:#ff0; }
tr:nth-last-child(2) { background:#ff0; }
p:last-child { background:#ff0; }
p:only-child { background:#ff0; }
p:empty { background:#ff0; }
10、CSS 3的反選僞類
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    43. 
    E:not(s) 
    匹配不符合當前選擇器的任何元素 
   
 
  
 
 
 
 
實例：
:not(p) { border:1px solid #ccc; }
11、CSS 3中的 :target 僞類
 
 
 
 

  
  
  
   
   
 
    序號 
    選擇器 
    含義 
   
 
   
 
    44. 
    E:target 
    匹配文檔中特定"id"點擊後的效果  
   
 
  
 
 
 
 
12、新增選擇器
新增選擇器列表：css
　　E[foo^="bar"]：匹配foo屬性值以"bar"開始的E元素前端
　　E[foo$="bar"]：匹配foo屬性值以"bar"結束的E元素web
　　E[foo*="bar"]：匹配foo屬性值包含"bar"的E元素瀏覽器
　　這幾個選擇器很簡單，其實在jQuery的選擇器中早就包含了，因此就很少說了。前端工程師
瀏覽器兼容性： 學習

 
 
 
 

  
  
  
   
   
 
    IE 
    Chrome 
    FireFox 
    Opera 
    Safari 
   
 
  
  
  
  
   
   
 
     
     
     
      
  • IE 6
    •  
      
  • IE 7
    •  
      
  • IE 8
    •  
      
  • IE 9
    •  
     
 
     
     
     
      
  • Chrome 1.0.x
    •  
      
  • Chrome 2.0.x
    •  
      
  • Chrome 3.0.x
    •  
      
  • Chrome 4.0.x
    •  
     
 
     
     
     
      
  • FireFox 1.5
    •  
      
  • FireFox 2.0
    •  
      
  • FireFox 3.0
    •  
      
  • FireFox 3.5
    •  
     
 
     
     
     
      
  • Opera 9.0
    •  
      
  • Opera 9.6
    •  
      
  • Opera 10.0
    •  
      
  • Opera 10.5
    •  
     
 
     
     
     
      
  • Safari 3.1
    •  
      
  • Safari 4.0
    •  
     
 
   
 
  
 
 
 
 
　　連IE七、8都提供了支持，IE6正逐漸被淘汰，因此放心地用吧。測試
結構僞類選擇器
新增結構僞類選擇器列表：url
　　E:root：匹配E所在文檔的根元素spa
　　E:nth-child(n)：匹配元素類型爲E且是父元素的第n個子元素.net
　　E:nth-last-child(n)：匹配元素類型爲E且是父元素的倒數第n個子元素（與上一項順序相反）
　　E:nth-of-type(n)：匹配父元素的第n個類型爲E的子元素
　　E:nth-last-of-type(n)：匹配父元素的倒數第n個類型爲E的子元素（與上一項順序相反）
　　E:first-of-type：匹配父元素的第一個類型爲E的子元素
　　E:last-child：匹配元素類型爲E且是父元素的最後一個子元素
　　E:last-of-type：匹配父元素的最後一個類型爲E的子元素
　　E:only-child：匹配元素類型爲E且是父元素中惟一的子元素
　　E:only-of-type：匹配父元素中惟一子元素是E的子元素
　　E:empty：匹配不包含子節點(包括文本)的E元素
　　這幾個選擇器平時用的比較少，其中 -child(n) 跟 -of-type(n) 很容易混淆，下面就以 nth-child(n) 與 nth-of-type(n) 爲例，說明一下區別：

 
 
 
 

  
  
  
  
<style type="text/css"> p:nth-child(2){color:red;} p:nth-of-type(2){border:1px solid #000;}
</style>
<div id="test">
    <p>P One</p>
    <p>P Two</p>
</div>
<div id="test">
    <span>Span Test</span>
    <p>P One</p>
    <p>P Two</p>
</div>

 
 
 
 
　　運行結果以下：
　　咱們能夠看到，:nth-child(n) 表示，選擇知足如下條件的元素：一、是一個p元素，2. 是父元素的第n個子元素。
　　:nth-of-type(n) 表示：選擇父元素的第n個子元素p
　　不知道你們看到這裏明白沒，若是還沒弄明白請看原文：http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
瀏覽器兼容性

 
 
 
 

  
  
  
   
   
 
    IE 
    Chrome 
    FireFox 
    Opera 
    Safari 
   
 
  
  
  
  
   
   
 
     
     
     
      
  • IE 6
    •  
      
  • IE 7
    •  
      
  • IE 8
    •  
      
  • IE 9
    •  
     
 
     
     
     
      
  • Chrome 1.0.x
    •  
      
  • Chrome 2.0.x
    •  
      
  • Chrome 3.0.x
    •  
      
  • Chrome 4.0.x
    •  
     
 
     
     
     
      
  • FireFox 1.5
    •  
      
  • FireFox 2.0
    •  
      
  • FireFox 3.0
    •  
      
  • FireFox 3.5
    •  
     
 
     
     
     
      
  • Opera 9.0
    •  
      
  • Opera 9.6
    •  
      
  • Opera 10.0
    •  
      
  • Opera 10.5
    •  
     
 
     
     
     
      
  • Safari 3.1
    •  
      
  • Safari 4.0
    •  
     
 
   
 
  
 
 
 
 
　　注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。
　　因爲IE6/7/8不支持，沒辦法，選擇合適的場合用吧。
UI元素狀態僞類選擇器
新增的UI元素狀態僞類選擇器列表：
　　E:enabled：選擇全部可用的E元素
　　E:disabled：選擇全部不可用的E元素
　　E:checked：選擇全部選中的E元素(主要用於checkbox和radio-button)
瀏覽器兼容性

 
 
 
 

  
  
  
   
   
 
    IE 
    Chrome 
    FireFox 
    Opera 
    Safari 
   
 
  
  
  
  
   
   
 
     
     
     
      
  • IE 6
    •  
      
  • IE 7
    •  
      
  • IE 8
    •  
      
  • IE 9
    •  
     
 
     
     
     
      
  • Chrome 1.0.x
    •  
      
  • Chrome 2.0.x
    •  
      
  • Chrome 3.0.x
    •  
      
  • Chrome 4.0.x
    •  
     
 
     
     
     
      
  • FireFox 1.5
    •  
      
  • FireFox 2.0
    •  
      
  • FireFox 3.0
    •  
      
  • FireFox 3.5
    •  
     
 
     
     
     
      
  • Opera 9.0
    •  
      
  • Opera 9.6
    •  
      
  • Opera 10.0
    •  
      
  • Opera 10.5
    •  
     
 
     
     
     
      
  • Safari 3.1
    •  
      
  • Safari 4.0
    •  
     
 
   
 
  
 
 
 
 
 　　how old are IE6/7/8???
目標僞類選擇器
新增目標僞類選擇器：
　　E:target：匹配URI中錨點指定的元素
　　這個有點繞，什麼意思呢？例如頁面上有個id爲test的DIV，而後在URI中有#test的話，就會給id爲test的DIV加上定義的樣式。
瀏覽器兼容性

 
 
 
 

  
  
  
   
   
 
    IE 
    Chrome 
    FireFox 
    Opera 
    Safari 
   
 
  
  
  
  
   
   
 
     
     
     
      
  • IE 6
    •  
      
  • IE 7
    •  
      
  • IE 8
    •  
      
  • IE 9
    •  
     
 
     
     
     
      
  • Chrome 1.0.x
    •  
      
  • Chrome 2.0.x
    •  
      
  • Chrome 3.0.x
    •  
      
  • Chrome 4.0.x
    •  
     
 
     
     
     
      
  • FireFox 1.5
    •  
      
  • FireFox 2.0
    •  
      
  • FireFox 3.0
    •  
      
  • FireFox 3.5
    •  
     
 
     
     
     
      
  • Opera 9.0
    •  
      
  • Opera 9.6
    •  
      
  • Opera 10.0
    •  
      
  • Opera 10.5
    •  
     
 
     
     
     
      
  • Safari 3.1
    •  
      
  • Safari 4.0
    •  
     
 
   
 
  
 
 
 
 
　　how old are IE6/7/8???
否認僞類選擇器
新增否認僞類選擇器：
　　E:not(s)：匹配類型爲E，不匹配選擇符爲 s 的元素。
瀏覽器兼容性

 
 
 
 

  
  
  
   
   
 
    IE 
    Chrome 
    FireFox 
    Opera 
    Safari 
   
 
  
  
  
  
   
   
 
     
     
     
      
  • IE 6
    •  
      
  • IE 7
    •  
      
  • IE 8
    •  
      
  • IE 9
    •  
     
 
     
     
     
      
  • Chrome 1.0.x
    •  
      
  • Chrome 2.0.x
    •  
      
  • Chrome 3.0.x
    •  
      
  • Chrome 4.0.x
    •  
     
 
     
     
     
      
  • FireFox 1.5
    •  
      
  • FireFox 2.0
    •  
      
  • FireFox 3.0
    •  
      
  • FireFox 3.5
    •  
     
 
     
     
     
      
  • Opera 9.0
    •  
      
  • Opera 9.6
    •  
      
  • Opera 10.0
    •  
      
  • Opera 10.5
    •  
     
 
     
     
     
      
  • Safari 3.1
    •  
      
  • Safari 4.0
    •  
     
 
   
 
  
 
 
 
 
　　FireFox如今都已經14+版了，主要仍是IE的問題，有選擇地用吧。
通用兄弟元素選擇器
新增通用兄弟元素選擇器
　　E~F：匹配位於E元素後面的F元素
　　注意，E和F是兄弟元素。
瀏覽器兼容性

 
 
 
 

  
  
  
   
   
 
    IE 
    Chrome 
    FireFox 
    Opera 
    Safari 
   
 
  
  
  
  
   
   
 
     
     
     
      
  • IE 6
    •  
      
  • IE 7
    •  
      
  • IE 8
    •  
      
  • IE 9
    •  
     
 
     
     
     
      
  • Chrome 1.0.x
    •  
      
  • Chrome 2.0.x
    •  
      
  • Chrome 3.0.x
    •  
      
  • Chrome 4.0.x
    •  
     
 
     
     
     
      
  • FireFox 1.5
    •  
      
  • FireFox 2.0
    •  
      
  • FireFox 3.0
    •  
      
  • FireFox 3.5
    •  
     
 
     
     
     
      
  • Opera 9.0
    •  
      
  • Opera 9.6
    •  
      
  • Opera 10.0
    •  
      
  • Opera 10.5
    •  
     
 
     
     
     
      
  • Safari 3.1
    •  
      
  • Safari 4.0
    •  
     
 
   
 
  
 
 
 
 
　　兼容性不錯，能夠大方地使用。
綜合示例
　　測試代碼：

 
 
 
 

  
  
  
  
<style type="text/css"> li{padding:10px;} input[name^="news"]{ border:1px solid #F60;
} ol li:nth-child(3n+1){ background:#EEE;
} ol li:nth-child(3n+2){ background:#666;
} input:disabled{ background:#EEE;
} div:target{ background:#F60;
} ol~div{ margin:5px 0; background:#EEE; padding:10px;
} div:not(#note){ margin:10px 0; border:1px solid #CCC; padding:10px; border-radius:5px;
}
</style>
<input name="newsletter" value="name=newsletter" />
<input name="milkman" disabled="disabled" value="name=milkman"/>
<input name="newsboy" value="name=newsboy" />
<div id="webt">前端工程師要學習的內容主要有：</div>
<ol>
  <li>JavaScript</li>
  <li>CSS</li>
  <li>HTML</li>
  <li>Ajax</li>
  <li>JSON</li>
  <li>XML</li>
  <li>jQuery</li>
</ol>
<div id="note">ol li:nth-child(3n+1)表示匹配索引（從1開始）爲3n+1的li元素，n可取0、一、二、3...等。E:nth-child(n)中n還爲odd（奇數）、even（偶數）</div>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程