CSS3選擇器備忘錄
除了id選擇器和class選擇器,另還有元素選擇器、屬性選擇器、包含選擇器、子選擇器和CSS3中新增的兄弟選擇器,以下帶上ID選擇器和類選擇器一起舉例。
1.ID 選擇器(ID selector,IS):使用 # 標識selector,語法格式:#S{...}(S為選擇器名)。例:id為name的標籤會匹配下面的樣式
<style> #name{ color:red; } </style> <!--下面文字是紅色的--> <p id="name">red text</p>
2.類選擇器(class selector,CS):使用 . 標識selector,語法格式:.S{...}
<style> .value{ text-align:center; } </style> <!--下面的文字是居中對齊的--> <p class="value">center text</p>
3.元素選擇器(element selector,ES):又叫標籤選擇器,使用標籤名作為selector名,語法格式:S{...}(S為選擇器名)。例:所有的p標籤都會匹配以下的樣式
<style> p{ font-style:italic; } </style> <!--下面的文字是斜體的--> <p style="font-style:italic">italic text</p>
4.屬性選擇器(attribute selector,AS):ES其實是AS的一個特例,在AS基礎上還能對selector描述得更具體,語法格式為 E[attr[~=][|=][^=][$=][*=]VALUE]{...},是並沒有得到所有瀏覽器支援的選擇器,因此不舉例
5.包含選擇器(package selector,PS):指定目標選擇器必須處在某個選擇器對應的元素內部,語法格式:A B{...}(A、B為HTML元素/標籤,表示對處於A中的B標籤有效)。例:以下div內的p標籤和div外的p標籤分別匹配不同的樣式
<style> p{ color:red; } div p{ color:yellow; } </style> <p>red text</p><!--文字是紅色的--> <div> <p>yellow text</p><!--文字是黃色的--> </div>
6.子選擇器(sub-selector,SS):類似於PS,指定目標選擇器必須處在某個選擇器對應的元素內部,兩者區別在於PS允許"子標籤"甚至"孫子標籤"及巢狀更深的標籤匹配相應的樣式,而SS強制指定目標選擇器作為 包含選擇器對應的標籤 內部的標籤,語法格式:A>B{...}(A、B為HTML元素/標籤)。例:以下div內的p標籤匹配樣式,div內的table內的p不匹配
<style> div>p{ color:red; } </style> <div> <p>red text</p><!--文字是紅色的--> <table> <tr> <td> <p>no red text;</p><!--文字是非紅色的--> </td> </tr> </table> </div>
7.兄弟選擇器(brother selector,BS):BS是CSS3.0新增的一個選擇器,語法格式:A~B{...}(A、B為HTML元素/標籤,表示A標籤匹配selector的A,B標籤匹配selector的B時,B標籤匹配樣式)
<style> div~p{ color:red; } </style> <div> <br>no red text</p><!--文字是非紅色的--> <div>no red text</div> <p>red text</p><!--文字是紅色的--> </div>