五類CSS選擇器

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選擇器技術。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章