CSS選擇器詳細介紹

CSS3 基本選擇器

為了更好的說明問題，先創建一個簡單的DOM結構，如下：

<div> 
    <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
   </ul> 
</div>

一、通配符選擇器（＊） 

一、通配符選擇器（＊） 
來選擇所有配符選擇器是用通配符選擇器是用通配符選擇，，也可以選擇某個元素下的所有元素。如：

程式碼如下:
    *{  marigin: 0;  padding: 0; }

上面程式碼大家在reset樣式檔案中看到的肯定不少，他所表示的是，所有元素的margin和padding都設定為0 ，另外一種就是選擇某個元素下的所有元素： 

代碼如下:

.demo * {border:1px solid blue;}


二、元素選擇器(E) 

元素選擇器，是css選擇器中最常見且最基本的選擇器。元素選擇器其實就是文件的元素，如html,body,p,div等等，像我們這個demo：中元素包含了div,ul,li等。

程式碼如下:

li {background-color: grey;color: orange;}

三、類別選擇器（.className） 
類別選擇器是以一獨立於文檔元素的方式指定樣式，使用類別選擇器之前需要在html元素上定義類別名，換句話說需要保證類別名稱在html標記中存在，這樣才能選擇類別，如： 

2

 
共中「active,important, items」就是我們以類別為li加上一個類別名，以便類別選擇器能正常運作，以便更好的將類別選擇器的樣式與元素相關聯。

.important {font-weight: bold; color: yellow;} 
上面程式碼表示是給有important類別名稱的元素加上一個「字體為粗體，顏色為黃色」的樣式;

類選擇器還有可以具備多類名，上面我們也看到了，我們li元素中同時有兩個或多少類名，其中他們以空格隔開，那麼選擇器也可以使用多類連接在一起，如： 

代碼如下:

.important {font-weight: bold;} 
.active {color: green;background: lime;} 

.items {color: #fff;background: #000;} 

.items {color: #fff;background: #000;} 

.important.items { background:#ccc;} 

.first.last {color: blue;}

正如上面的程式碼所示，".important.items"這個選擇器只對元素中同時包含了"important"和"items "兩個類別才能運作. 所有瀏覽器都支援類別選擇器，但多類別選擇器（.className1.className2）不被ie6支援。

五、後代選擇器（Ｅ Ｆ）

後代選擇器也被稱為包含選擇器,所起作用就是可以選擇某元素的後代元素，比如說:E F，前面E為祖先元素，Ｆ為後代元素，所表達的意思就是選擇了Ｅ元素的所有後代Ｆ元素，請注意他們之間需要一個空格隔開。這裡Ｆ不管是E元素的子元素或是孫元素或是更深層的關係，都會被選中，換句話說，不論Ｆ在Ｅ中有多少層關係，都會被選中：

.demo li { color: blue;} 

上面表示的是，選取div.demo中所有的li元素

 

六、子元素選擇器(E>F)

子元素選擇器只能選擇某元素的子元素，其中E為父元素，而F為子元素，其中E>F所表示的是選擇了Ｅ元素下的​​所有子元素Ｆ。這和後代選擇者（Ｅ Ｆ）不一樣，在後代選擇器中Ｆ是Ｅ的後代元素，而子元素選擇器Ｅ > F，其中Ｆ僅僅是Ｅ的子元素而以。

ul > li {background: green;color: yellow;} 

上在程式碼表示選擇ul下的所有子元素li。如： 

IE6不支援子元素選擇器。

 

七、相鄰兄弟元素選擇器(E + F)

相鄰兄弟選擇器可以選擇緊接在另一個元素後的元素，而且他們有一個相同的父元素，換句話說，EF兩個元素有一個相同的父元素，而且Ｆ元素在Ｅ元素後面，而且相鄰，這樣我們就可以使用相鄰兄弟元素選擇器來選擇Ｆ元素。

程式碼如下:

li + li {background: green;color: yellow; border: 1px solid #ccc;}

上面程式碼表示選擇這裡共有的元素li，我們一共有十位。 ，那麼上面的程式碼選擇了從第2個li到10 個li，一共九個 

IE6不支援這個選擇器

八、通用兄弟選擇器（Ｅ ～ Ｆ）

通用兄弟元素選擇器是CSS33新增加一種選擇器，這種選擇器將選擇某元素後面的所有兄弟元素，他們也和相鄰兄弟元素類似，需要在同一個父元素之中，換句話說，E和F元素是屬於同一父元素之內，且F元素在Ｅ元素之後，那麼E ~ F 選擇器將選取中所有Ｅ元素後面的Ｆ元素。例如下面的程式碼：

🎜🎜🎜程式碼如下:🎜

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

上面的代碼所表示的是，選擇中了li.active 元素後面的所有兄弟元素li 

九、群組選擇器（selector1,selector2,...,selectorN）

群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開，如上面所示selector1,selector2,...,selectorN。這個逗號告訴瀏覽器，規則中包含多個不同的選擇器，如果不有這個逗號，那麼所表達的意就完全不同了，省去逗號就成了我們前面所說的後代選擇器，這一點大家在使用中千萬要小心加小心。

更多CSS選擇器詳細介紹相關文章請關注PHP中文網！