CSS選擇器可以準確的查找到指定的標籤,使用CSS選擇器可以使我們方便爲標籤定義CSS樣式,而不用爲每個標籤都定義CSS樣式。
下面我們講一下最常用的五種CSS選擇器:
一、標籤選擇器:通常用它來查找HTML中的某一種標籤。
例如:
要爲HTML中的所有P標籤設計樣式,可以使用下面的方法
p { font:12px;}
二、id選擇器: 通常用它來查找標籤中ID爲指定值。
例如:
在HTML中有一個這樣的標籤<div id="menubar"></div>我們可以看到的的id值爲menubar,
現在我們要爲id值爲menubar定義樣式,可以這樣
#menubar {
margin:0 auto;
background:#ccc;
color:#c00;
}
三、類選擇器: 類選擇器主要用來查找一組相同類型的標籤
例如:在HTML中類選擇器用來查找標籤中屬性class爲某一類的一組標籤如 <span class="da1">
我們可以
.da1 {
color:#f60;
font-size:14px ;
}
這樣凡是標籤中class爲da1的都會應用這個樣式。
四、後代選擇器:後代選擇器也叫派生選擇器。可以使用後代選擇器給一個元素裏的子元素定義樣式
例如:
li strong {
font-style:italic;
font-weight:800;
color:#f00;
}
給HTML中li標籤下的子標籤strong標籤定義上面的樣式
五、羣組選擇器: 查找一組選擇器可以使用羣組選擇器
例如:當幾個選擇器都使用一樣的樣式時,可以使用如下方法
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}
注意選擇器之間以逗號分隔
實際上CSS選擇器的技術不只可以用在CSS上面,也可以用在其它查找DOM元素上面,如JAVASCRIPT框架JQUERY就使用了CSS選擇器技術。