目錄
通用選擇器
通用選擇器可以選擇頁面上的所有元素，並對它們應用樣式，用 * 來表示。
語法：
* { property1: value; property2: value; }
示例：
* { margin:0; padding:0;}
這行代碼可以刪除每個元素在瀏覽器中margin和padding的默認值。不同的瀏覽器對元素的默認margin和padding可能不同，用通用選擇器把所有元素的margin和padding都設置為0方便我們精確地控制元素的margin和padding。
此處我們以IE11為例看一下實際效果：
當我們想要h1距離下一個元素的距離為20（此處假設下一個元素的margin-top, padding-top和border-weight都是0），可以通過設置padding-bottom為20px來實現，但觀察效果卻發現h1距離下一個元素遠不止20px，這是由於IE11對h1有一個默認的margin值（可以觀察到其實body也是有默認margin的），可以通過通用選擇器來修復這個問題：
子選擇器
后代選擇器選擇一個元素的所有后代，而子選擇器只選擇元素的直接后來，即后代的后代不會受影響。
語法：
selector > child { property1: value; property2: value; }
示例：
<html> <head> <style type="text/css"> #test>li{padding-left:30px;} </style> </head> <body> <ul id="test"> <li>A</li> <li>B</li> <li>C <ul> <li>C1</li> <li>C2</li> <li>C3</li> </ul> </li> <li>D</li> </ul> </body> </html>
效果圖：
#test>li{padding-left:30px;}
這行代碼選擇了id為test的子元素li，並將padding-left設置為30px，可以看到 li 標簽內部的無序列表項目沒有發生變化。若將以上代碼改為
#test li{padding-left:30px;}
再來看一下效果圖：
li中無序列表項的padding也發生了相應改變。
Note: 只有IE7機器更高版本瀏覽器才支持子選擇器。
相鄰兄弟選擇器
相鄰兄弟選擇器可以選擇同一個父元素下某個元素之后的元素，並對其應用樣式。
示例：
<html> <head> <style type="text/css"> h1+p{color:Red;} </style> </head> <body> <h1>小胖搞IT</h1> <p>一個胖子從樓上掉下來...</p> <p>然后............</p> <p>奇跡發生了！</p> <p>他彈了起來！</p> </body> </html>
效果圖：
h1+p{color:Red;}
這行代碼選擇了h1元素的下一個元素p，並將其設置為紅色。
Note: 只有IE7機器更高版本瀏覽器才支持子選擇器。
一個子選擇器和相鄰兄弟選擇器結合使用的例子：
<html> <head> <style type="text/css"> #test > h1 + p {color:Red;} </style> </head> <body> <div id="test"> <h1>小胖搞IT</h1> <p>一個胖子從樓上掉下來...</p> <p>然后............</p> <p>奇跡發生了！</p> <p>他彈了起來！</p> <div> <h1>瘦子搞IT</h1> <p>一個瘦子從樓上掉下來...</p> <p>然后............</p> <p>奇跡沒有發生！</p> <p>他摔死了！</p> </div> </div> </body> </html>
效果圖：
#test > h1 + p {color:Red;}
這行代碼選擇了id為test的元素的h1子元素，再找到它的下一個兄弟元素p，並設置為紅色， <h1>瘦子搞IT</h1> 不是id為test的div的子元素，故沒有變化。
屬性選擇器
屬性選擇器可以根據某個屬性是否存在或根據屬性的值來尋找元素，並對其使用樣式。
語法：
示例：
<html> <head> <style type="text/css"> a[title]{font-size:30px;} a[title="Fatty"]{color:Red;} a[title~="Fatty"] {font-weight:bold;} a[title|="FattyDoIT"] {font-style:italic;} a[title^="F"]{text-decoration:line-through; } a[title$="IT"]::before {content:url(star.png);} a[title*="Do"]::after {content:url(heart.png);} </style> </head> <body> <a href="http://www.cnblogs.com/fattydoit/">小胖搞IT</a><br> <a href="http://www.cnblogs.com/fattydoit/" title="FattyDoIT">小胖搞IT</a><br> <a href="http://www.cnblogs.com/fattydoit/" title="Fatty">小胖搞IT</a><br> <a href="http://www.cnblogs.com/fattydoit/" title="Fatty Do IT">小胖搞IT</a> </body> </html>
效果圖：
a[title]{font-size:30px;}
這行代碼選擇了所有具有title屬性的a元素，並將字體大小設置為30px；
a[title="Fatty"]{color:Red;}
這行代碼選擇title值為Fatty的a元素，並將字體顏色設置為紅色；
a[title~="Fatty"] {font-weight:bold;}
這行代碼選擇title所有屬性值中包含Fatty的a元素，並將字體加粗；
a[title|="FattyDoIT"] {font-style:italic;}
這行代碼選擇title值以FattyDoIT開頭且是一個單詞的a元素，並將字體改為斜體；
a[title^="F"]{text-decoration:line-through; }
這行代碼選擇title屬性值以F開頭的所有a元素，並設置text-decoration為line-through;
a[title$="IT"]::before {content:url(star.png);}
這行代碼選擇title屬性值以IT結尾的所有a元素，並在之前放置一張圖片；
a[title*="Do"]::after {content:url(heart.png);}
這行代碼選擇title屬性值中包含Do的所有a元素，並在之后放置一張圖片。
Note: 只有IE7機器更高版本瀏覽器才支持子選擇器。
參考資料：