CSS3中的選擇器
這裏總結一共有11種選擇器，分別為：
通配符選擇器、類選擇器、id選擇器、元素選擇器（又叫標簽選擇器）、屬性選擇器、
偽類選擇器、偽元素選擇器、後代選擇器（又叫包含選擇器）、子元素選擇器、兄弟選擇器（相鄰兄弟選擇器+、通用兄弟選擇器~）、群組選擇器（幾個共用一個，用逗號隔開）
1、通配符選擇器
語法：* {屬性名：屬性值；屬性名：屬性值； ........} 為頁面上的所有元素設置樣式，優先級最低
*{ margin:0; padding:0; }
2、類選擇器
語法：.類名{屬性名：屬性值；屬性名：屬性值； .......} 為含有相同類名的元素設置樣式
<style> .s1{ color:red; } </style> <body> <p class=‘s1‘>aa</p> <p class=‘s2‘>bb</p>
<p class=‘s1 s2‘>cc</p>
<!----aa和cc的字體顏色為紅色----> </body>
3、id選擇器
語法：#id名{屬性名：屬性值；屬性名：屬性值； .......} 為id屬性值為指定id名的元素設置樣式
<style> #d1{ color:red; } </style> <body> <p id=‘d1‘>aa</p> <p id=‘d2‘>bb</p> <!----aa的字體顏色為紅色----> </body>
註意：在一個html文檔中，一個id名只能使用一次；且不能使用id詞列表
<p id=‘d1‘>aa</p> <p id=‘d1‘>bb</p> <!----錯誤，一個id名只能使用一次----> <p id=‘d2 d3‘>cc</p> <!-----錯誤，不能使用id列表-------->
4、元素選擇器
又叫標簽選擇器，根據元素名（標簽名）來設置樣式
語法：元素名{屬性名：屬性值；屬性名：屬性值； .......} 為所有指定的元素設置樣式
<style> p{
color:red; } </style> <body> <p>aa</p> <div> <p>bb</p> </div> <p >cc</p> <!----aa、bb和cc的字體顏色均為紅色----> </body>
5、屬性選擇器
具體分為三種：
①簡單屬性選擇器：選擇具有某個屬性名的元素
語法：[元素屬性名]{屬性名：屬性值；屬性名：屬性值； .......} 選擇有指定屬性名的元素，而不管元素的該屬性的屬性值是什麽
<style> [href]{ color:red; } </style> <body> <a href=‘taobao‘>taobao</a> <div> <a href=‘baidu‘>baidu</a> </div> <a href=‘tencent‘ >tencent</p> <!----taobao baiidu和tencent的字體顏色均為紅色----> </body>
②具體屬性值選擇器：選擇具有指定屬性鍵值對（屬性名和屬性值都要匹配）的元素
語法：[元素屬性="屬性值"]{屬性名：屬性值；屬性名：屬性值； .......} 屬性名和屬性值要完全匹配
<style> [href=‘taobao‘]{ color:red; } </style> <body> <a href=‘taobao‘>taobao</a> <div> <a href=‘baidu‘>baidu</a> </div> <a href=‘tencent‘ >tencent</p> <!----taobao的字體顏色均為紅色----> </body>
③子串匹配屬性選擇器：可以規定屬性值包含什麽字符串(*)或以什麽字符串開頭(^)/結尾($)
語法：[元素屬性^="def"]{屬性名：屬性值；屬性名：屬性值； .......} 相應的屬性值以def開頭的元素
[元素屬性$="def"]{屬性名：屬性值；屬性名：屬性值； .......} 相應的屬性值以def結尾的元素
[元素屬性*="def"]{屬性名：屬性值；屬性名：屬性值； .......} 相應的屬性值包含def的元素
<style> [href^=‘t‘]{ color:red; } [href$=‘u‘]{ color:yellow; } [href*=‘b‘]{ font-size:30px; } </style> <body> <a href=‘taobao‘>taobao</a> <div> <a href=‘baidu‘>baidu</a> </div> <a href=‘tencent‘ >tencent</p> <!----taobao和tencent的字體顏色為紅色;baidu的字體顏色為黃色;taobao和baidu的字體大小為30px----> </body>
6、後代選擇器（又叫包含選擇器）
語法：祖先元素 後代元素 {屬性名：屬性值；屬性名：屬性值； .......} 為具有指定祖先元素的所有後代元素設置樣式 ，這兩個元素之間的層次間隔可以是無限的
<style> .s1 p{ color:red; } </style> <body> <p>aa</p> <div class=‘s1‘> <p>bb</p> <div> <p>cc</p> </div> <p>dd</p> </div> <p >ee</p> <!----bb、cc和dd的字體顏色為紅色----> </body>
7、子元素選擇器
語法：父元素>子元素 {屬性名：屬性值；屬性名：屬性值； .......} 為具有指定父元素的所有子元素設置樣式，其中子元素為父元素的直接子元素（註意和後代子元素的區別）
<style> .s1>p{ color:red; } </style> <body> <p>aa</p> <div class=‘s1‘> <p>bb</p> <div> <p>cc</p> </div> <p>dd</p> </div> <p >ee</p> <!----bb和dd的字體顏色為紅色----> </body>
8、兄弟選擇器（相鄰兄弟選擇器+、通用兄弟選擇器~）
分為兩種：相鄰兄弟選擇器（+）和通用兄弟選擇器（~）
①相鄰兄弟選擇器
語法：元素E+元素F {屬性名：屬性值；屬性名：屬性值； .......} 為緊接著E元素後的F元素設置樣式，且E元素和F元素具有相同的父元素（兩者為兄弟元素）
<style> .s1+p{ color:red; } </style> <body> <div> <p>aa</p> <p class=‘s1‘>bb</p> <p>cc</p> </div> <p >dd</p> <!----cc的字體顏色為紅色----> </body>
②通用兄弟選擇器
語法：E~F {屬性名：屬性值；屬性名：屬性值； .......} 為E後面的所有能夠匹配F的其兄弟元素F設置樣式
<style> .s1~p{ color:red; } </style> <body> <div> <p>aa</p> <p class=‘s1‘>bb</p> <div> <p>cc</p> </div> <p>dd</p> <p>ee</p> </div> <p >ff</p> <!----dd和ee的字體顏色為紅色----> </body>
9、偽元素選擇器
語法：selector: pseudo-element/:: pseudo-element{property:value;........} 通過添加一些實際的元素來向匹配selector選擇器的元素添加一些效果
有以下五種：
①:first-line/::first-line偽元素 用於向文本的首行設置特殊樣式
②:first-letter/::first-letter偽元素 用於向文本的首字母設置樣式
③:before/::before 在元素之前添加內容
④:after /::after 在元素之後添加內容
⑤::selection 設置元素在被選擇時的樣式。
說明：CSS3之前，偽元素只有1~4四種（::selection為新增），且均為單冒號（：），為了和偽類選擇器進行區分，CSS3中規定，偽元素一律使用雙冒號（::）,但單冒號依然可以使用，且兼容性更好
<style> div{float:left;margin:20px;} h1{font-size:16px;} p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;} .s1 p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;} .s1 p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;} .s2 p:first-line {color:#090;} .s2 p::first-line {color:#090;} .s3 p::before{content:"haha--";color:red;} .s4 p::after{content:"--haha";color:red;} .s5 p::selection{background:#000;color:#f00;} </style> <body> <div class="s1"> <h1>雜誌常用的首字下沈效果（first-letter）</h1> <p> 今天，陽光明媚，晴空萬裏，非常適合戶外活動，如踏青、遠足之類的。長期 坐在辦公室的同學們要多註意運動。 </p> </div> <div class="s2"> <h1>雜誌常用的首字下沈效果（first-line）</h1> <p> 今天，陽光明媚，晴空萬裏，非常適合戶外活動，如踏青、遠足之類的。長期 坐在辦公室的同學們要多註意運動。 </p> </div> <div class="s3"> <h1>在元素前添加內容（after）</h1> <p>this is a test</p> </div> <div class="s4"> <h1>在元素後添加內容（after）</h1> <p>this is a test</p> </div> <div class="s5"> <h1>選中下面的文字，看看它的顏色(selection)</h1> <p>你選中這段文字後，看看它們的文本顏色和背景色，就能明白::selection的作用。</p> </div> </body>
效果圖為：
附加一個after和before的應用實例
10、偽類選擇器
語法：selector: pseudo-classes-selector{property:value;........} 向匹配selector選擇器的元素添加一些效果
偽類較多，在此只羅列，不舉例
| E:link | CSS1 | 設置超鏈接a在未被訪問前的樣式。 |
| E:visited | CSS1 | 設置超鏈接a在其鏈接地址已被訪問過時的樣式。 |
| E:hover | CSS1/2 | 設置元素在其鼠標懸停時的樣式。 |
| E:active | CSS1/2 | 設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。 |
| E:focus | CSS1/2 | 設置元素在成為輸入焦點（該元素的onfocus事件發生）時的樣式。 |
| E:lang(fr) | CSS2 | 匹配使用特殊語言的E元素。 |
| E:not(s) | CSS3 | 匹配不含有s選擇符的元素E。 |
| E:root | CSS3 | 匹配E元素在文檔的根元素。 |
| E:first-child | CSS2 | 匹配父元素的第一個子元素E。 |
| E:last-child | CSS3 | 匹配父元素的最後一個子元素E。 |
| E:only-child | CSS3 | 匹配父元素僅有的一個子元素E。 |
| E:nth-child(n) | CSS3 | 匹配父元素的第n個子元素E。 |
| E:nth-last-child(n) | CSS3 | 匹配父元素的倒數第n個子元素E。 |
| E:first-of-type | CSS3 | 匹配同類型中的第一個同級兄弟元素E。 |
| E:last-of-type | CSS3 | 匹配同類型中的最後一個同級兄弟元素E。 |
| E:only-of-type | CSS3 | 匹配同類型中的唯一的一個同級兄弟元素E。 |
| E:nth-of-type(n) | CSS3 | 匹配同類型中的第n個同級兄弟元素E。 |
| E:nth-last-of-type(n) | CSS3 | 匹配同類型中的倒數第n個同級兄弟元素E。 |
| E:empty | CSS3 | 匹配沒有任何子元素（包括text節點）的元素E。 |
| E:checked | CSS3 | 匹配用戶界面上處於選中狀態的元素E。(用於input type為radio與checkbox時) |
| E:enabled | CSS3 | 匹配用戶界面上處於可用狀態的元素E。 |
| E:disabled | CSS3 | 匹配用戶界面上處於禁用狀態的元素E。 |
| E:target | CSS3 | 匹配相關URL指向的E元素。 |
關於偽類和偽元素的區別，推薦一篇博文，感覺寫的很好
11、群組選擇器
語法：selector1,selector2,selector3,....{property:value;........} 幾種選擇器共用一種樣式，選擇器之間用逗號隔開
<style> .s1,p{ color:red; } </style> <body> <p>aa</p> <span class=‘s1‘>bb</span> <a>cc</a> <!----aa和bb的字體顏色為紅色----> </body>
CSS3中的選擇器