五類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選取器技術。