直接開始正文。
一、css3同級元素通用選擇器【update20161228】
選擇器:E~F 匹配任何在E元素之后的同級F元素
Note：E~F選擇器選中的是E元素后面同級元素中的全部F元素。
例:2個導航之間加個豎杠的效果，可以用li~li選擇器，在li后面同級的li的前面加個豎杠。
li~li:before{ /*E~F：css3選擇器，匹配任何在E元素之后的同級F元素*/ content: "|"; color: red; padding-right: 5px; }
二、屬性選擇器
屬性選擇器就是根據元素的屬性及屬性值來選擇元素，用好屬性選擇器可以讓你的級別上升一個層次。
1、只根據屬性選擇元素
適用於希望選擇有某個屬性的元素，只關心屬性不關心屬性值。。
Note：元素和方括號中間沒有冒號，也不能有空格，方括號之間也不能有空格。
a、根據一個屬性選擇【E[Attr]】：
*[title]{color:blue;}就可以給所以帶title的元素設置樣式。
a[href]{color:red;}只對有href的錨(a 元素)應用樣式。
b、根據多個屬性選擇【E[Attr1][Attr2]】：
a[href][title]{color: red;} 給同時由href和title屬性的錨(a 元素)應用樣式。
一個很實用的調試樣式方法：img[alt] {border: 5px solid red;}給所有帶有alt屬性的圖像應用樣式，從而突出顯示這些有效的圖像。該方法可以用來診斷圖像是否確實有效。
根據屬性選擇器匹配元素時，這些屬性可以是自定義的值，舉例:
隨便定義一個屬性haha，給它隨便賦值test，然后通過div[haha]這個屬性選擇器就可以匹配並添加樣式。
<style> div[haha]{ background-color: green; } </style> <div haha="test">一個測試的div元素</div>
我之所以取名這么隨意就是想說明，在屬性選擇器中，自定義的屬性也是可以用的，當然這是不推薦的。
2、根據屬性值選擇
根據屬性值選擇，可進一步縮小選擇范圍。
a、根據一個屬性值選擇【E[Attr=Val]】:
b、根據多個屬性值選擇【E[Attr1=Val1][Attr2=Val2]】:
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
以上都是完全匹配，也可以根據部分屬性值選擇。
c、根據屬性值的詞列表中某個詞進行匹配【E[Attr~=Val]】
對於多個用空格隔開的屬性值，則需要使用波浪號(~)進行匹配。
[title~=hello]{color:red;} 可以選中<h2 title="hello world">Hello world</h2>，但無法選中<h2 title="world">Hello world</h2>。
d、特定屬性選擇類型【E[Attr|=Val]】
E[Attr|=Val]選擇有屬性Attr且Attr的屬性值是以Val或者Val-開頭的元素。
*[lang|="en"]{color: red;}
可以匹配lang屬性等於en或以en-開頭的所有元素。
<style type="text/css"> *[lang|="en"]{color: red;} </style> <body> <p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p> </body>
e、使用通配符的屬性選擇器【E[Attr^=Val]】【E[Attr$=Val]】【E[Attr*=Val]】
css3屬性選擇器中的大boss，使得選擇器功能分分鍾提升。
E[att^="val"]，選擇器匹配元素E，且E元素定義了屬性att,att的屬性值是以val開頭的任何字符串。
E[att$="val"]，選擇器匹配元素E，且E元素定義了屬性att，att的屬性值以val結尾的任何字符串。
E[att*="val"]，選擇器匹配元素E，且元素定義了屬性att，att屬性值任意位置包含了"val"。
這幾個通配符和jquery中的一樣。
舉個例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <style type="text/css"> a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; } </style> </head> <body> <a href="xxx.pdf">我鏈接的是PDF文件</a> <a href="#" class="icon">我類名是icon</a> <a href="#" title="我的title是more">我的title是more</a> </body> </html>
f、屬性選擇器 也可以用html5中新增的data屬性，但是不推薦用。
div[data-myid="123456"]{
background-color: green;
}
<div id="xxx" name="test" data-myid="123456">div</div>
三、結構性偽類選擇【:root】
:root為根選擇器，匹配元素所在文檔樹的根元素，而在html文檔中，根元素就是html，所以:root就相當於html。
下面三種寫法都是等效的：
html:root { background:orange; } :root { background:orange; } html { background:orange; }
不知道為什么網上都寫着“建議使用:root方法”，但是不給個理由，呵呵。我對:root持保留態度，因為實在沒覺得有什么用啊。
四、結構性偽類選擇器【:not】
:not選擇器和jquery中的:not選擇器一樣，選擇除某個元素之外的所有元素，是個比較好用的選擇器。
使用:not選擇器注意事項：
Note:【:not】必須緊跟元素，不能有空格。:not后跟括號，這個括號在屬性選擇器里是沒有的。
舉個有用的例子：給表單中除submit按鈕之外的input添加紅色邊框。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <style type="text/css"> form{ width: 200px; margin: 20px auto; } div{ margin-bottom: 20px; } /*input[type="text"]{ border:1px solid red; }*/ input:not([type="submit"]){ border:1px solid red; } </style> </head> <body> <form> <div> <label for="name">昵稱:</label> <input type="text" id="name" placeholder="starof"> </div> <div> <label for="password">密碼:</label> <input type="text" id="password" placeholder="******"> </div> <div> <input type="submit" value="提交"> </div> </form> </body> </html>
五、結構性偽類選擇器【:empty】
：empty選擇器表示的就是空，用來選擇沒有任何內容的元素， 真的是什么內容都沒有，空格都不能有。
舉例：第一個<p>有文字內容，第二個<p>只有一個空格，第三個<p>為空。:empty就可以選中第三個<p>給它添加樣式。
<style type="text/css"> p{ background-color: orange; min-height: 30px; } :empty{ background-color: red; } </style> <p>我是一個段落</p> <p> </p> <p></p>
在jquery中empty()和remove([expr])都用來移除元素，但是empty()是移除了指定元素中的所有子節點，仍保留其在dom中所占的位置。$("p").empty()，就會剩下<p></p>這樣一個空標簽，此時就可以用css3中的:empty為其添加樣式。remove([expr])則是把其從dom中刪除，而不會保留其所占的位置。
六、結構性偽類選擇器【：target】
：target為目標選擇器，用來匹配相關URL指向的元素。
：target是個很有意思的結構化偽類選擇器，可以很輕松的實現點一個標題顯示內容，而且還可以用#brand:target p{}這樣配合選擇target下的后代選擇器。
舉例：簡潔版手風琴效果。
這樣.accordion :target p{display: block;}一行代碼就可以實現手風琴的效果。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>css手風琴效果</title> <style type="text/css"> .accordion p{ display: none; } .accordion :target p{ display: block; } /*和下面這種寫法是等價的*/ /*#section-1:target p,#section-2:target p,#section-3:target p{ display: block; }; */ </style> </head> <body> <div class="accordion"> <div id="section-1"> <h2> <a href="#section-1">section-1</a> </h2> <p>第一部分內容</p> </div> <div id="section-2"> <h2> <a href="#section-2">section-2</a> </h2> <p>第二部分內容</p> </div> <div id="section-3"> <h2> <a href="#section-3">section-3</a> </h2> <p>第三部分內容</p> </div> </div> </body> </html>
MDN相關資料:target
七、結構性偽類選擇器【first-child】
":first-child"選擇器表示的是選擇父元素的第一個子元素E。
舉個例子：對比后代元素，子元素和第一個子元素。
后代元素：選擇所有后代。
子元素：只選擇第一代。
:first-chid：選擇第一代中的第一個元素【這個站在父元素的角度理解的，如果站在元素自身的角度理解就是，如果該元素是其父元素的第一個子元素，就選中，通俗理解就是如果小明是他爸爸的大兒子就選中】。
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>結構性偽類選擇器—first-child</title> <style type="text/css"> ul.ancestor li{ background-color: yellow; } ul.ancestor >li{ background-color: green; } ul.ancestor >li:first-child{ color: orange; } </style> </head> <body> <ul class="ancestor"> <li> <a href="##">Link1</a> 文字顏色是橙色，超鏈接的color被瀏覽器樣式覆蓋了，所以才不是橙色 </li> <li> <a href="##">Link2</a> 關注文字顏色，不要關注超鏈接顏色 </li> <li> <a href="##">Link3</a> 關注文字顏色，不要關注超鏈接顏色 </li> <li> <ul> <li> <a href="##">Link4</a> 關注文字顏色，不要關注超鏈接顏色 </li> <li> <a href="##">Link5</a> 關注文字顏色，不要關注超鏈接顏色 </li> <li> <a href="##">Link6</a> 關注文字顏色，不要關注超鏈接顏色 </li> </ul> </li> <li> <a href="##">Link7</a> 不要關注超鏈接顏色 </li> </ul> </body> </html>
分析：
說明：ul.ancestor是為了意思更明確這些寫的，各位正式寫的話只要寫.ancestor就好了。
ul.ancestor li：是后代選擇器，所以樣式會應用到所有的后代li元素，讓它們背景色變黃。
ul.ancestor >li:是子選擇器，所以樣式會應用到第一代li元素，讓它們背景色變綠，覆蓋前面樣式。
ul.ancestor >li:first-child：選擇第一代中的第一個li元素，讓其文字顏色變為橘色。
補充內容
為什么我要寫這句話：文字顏色是橙色，超鏈接的color被瀏覽器樣式覆蓋了，所以才不是橙色。
因為慕課網出的一道題：將無序列表的第一個項目符號設置為紅色。答案是ul li:first-child{ color: red;}。導致我以為只能選中項目符號，所以就測試了一下，確實是選擇第一代中第一個元素。
有興趣的可自行測試：
<p style="color:red">文字<a href="#">a</a></p>
效果為：
，
原因是瀏覽器默認樣式覆蓋了繼承自p的color樣式。
Note:
- ：first-child對初學者來說是個容易出錯的選擇器，容易犯錯：
看第一眼我以為我以為ul:first-child會是選中第一個li呢，但其真正的含義是，如果ul是它父元素的第一個子元素，就選中加樣式。所以避免出錯推薦像我這樣ul.ancestor >li:first-child非常明確的寫出，而不用自己去推測。
- 是單冒號而不是雙冒號。
八、結構性偽類選擇器【:last-child】
:last-child和:first-chld類似，用來選擇第一代中最后一個元素，是個很實用的選擇器。
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <style type="text/css"> ul{ list-style-type: none; border:1px solid grey; display: inline-block; padding: 0; width: 200px; } li{ padding: 5px; border-bottom: 3px solid grey; } ul >li:last-child{ border-bottom:none; } </style> </head> <body> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item5</li> <li>Item6</li> </ul> </body> </html>
補充2015/11/10 :【:last-child】在IE8不兼容，所以開發環境很少用。
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4563756.html有問題歡迎與我討論，共同進步。