CSS3 選取器之基本選取器

標籤：style   blog   http   color   使用   strong   2014   ar   

CSS是一種用於螢幕上渲染html，xml等一種語言，CSS主要是在相應的元素中應用樣式，來渲染相對應用的元素，那麼這樣我們選擇相應的元素就很重要了，如何選擇對應的元素，此時就需要我們所說的選取器。選取器主要是用來確定html的樹形結構中的DOM元素節點。

CSS3的常用選取器有：

下面舉幾個例子來說明選取器的實用方法：

1、建立如下的DOM結構：

<div class="demo"><ul class="clearfix"><li id="first" class="first">1</li><li class="active important">2</li><li class="important items">3</li><li class="important">4</li><li class="items">5</li><li>6</li><li>7</li><li>8</li><li>9</li><li id="last" class="last">10</li></ul></div>

2、給它加上一些好看樣式：

.demo {width: 300px;border: 1px solid #ccc;padding: 10px;}li {float: left;height: 20px;line-height: 20px;width: 20px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}

這時，你可以得到如下的效果：

3、下面來看看萬用字元選取器（＊）

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

得到如下效果：

從上面的看，只要是div.demo下的元素邊框都加上了新的樣式。所有瀏覽器支援萬用字元選取器。

4.再來看元素選取器(E)

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

 

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

 

得到如下效果：

5.接下來是類別選取器（.className）

類別選取器是以一獨立於文件項目的方式來指定樣式，使用類別選取器之前需要在html元素上定義類名，換句話說需要保證類名在html標記中存在，這樣才能選擇類，如：

<li class="active important items">2</li>

其中“active,important, items”就是我們以類給li加上一個類名，以便類別選取器能正常工作，從而更好的將類別選取器的樣式與元素相關聯。

.important {font-weight: bold; color: yellow;}

得到如下效果：

類別選取器還可以結合元素選取器來使用，比如說，你文檔中有好多個元素使用了類名“items”，但你只想在p元素這個類名上修改樣式，那麼你可以這樣進行選擇並加上相應的樣式：

p.items {color: red;}

上面代碼只會匹配class 屬性包含important 的所有p 元素，但其他任何類型的元素都不匹配，包括有“items”這個類名的元素，上面也說過了“p.items”只會對p元素並且是其有一個類名叫“items”。不符合這兩個條件的都不會被選擇。
類別選取器還有可以具備多類名，上面我們也看到了，我們li元素中同時有兩個或多少類名，其中他們以空格隔開，那麼選取器也可以使用多類串連在一起，如：

.important {font-weight: bold;}.active {color: green;background: lime;}.items {color: #fff;background: #000;}.important.items {background:#ccc;}.first.last {color: blue;}                

正如上面的代碼所示，".important.items"這個選取器只對元素中同時包含了"important"和"items"兩個類才能起作用，：

有一點大家需要注意，如果一個多類別選取器包含的類名中其中有一個不存在，那麼這個選取器將無法找到相匹配的元素 比如說下在這句代碼，他就無法到找相對應的的元素標籤，因為我們列表中只有一個li.first和一個li.last，不存在有一個叫li.first.last的清單項目：

.first.last {color: blue;}

所有瀏覽器都支援類別選取器，但多類別選取器（.className1.className2）不被ie6支援。

6.id選取器（#ID）

ID選取器和上面說的類別選取器是很相似的，在使用ID選取器之前也需要先在html文檔中加註ID名稱，這樣在樣式選取器中才能找到相對應的元素，不同的是ID選取器是一個頁面中唯一的值，我們在類使用時是在相對應的類名前加上一個“.”號（.className）而id選取器是在名稱前使用"#"如(#id)

 

#first {background: lime;color: #000;}#last {background: #000;color: lime;}

 

上面的代碼就是選擇了id為"first"和"last"的清單項目，其效果如下

ID選取器有幾個地方需要特別注意的。

第一：一個文檔中一個id選取器只充許使用一次，因為id在頁面中是唯一的；

第二，id選取器不能像類別選取器一樣多個合并使用，一個元素只能命名一個id名；

第三，可以在不同的文檔中使用相同的id名，比如說在“test.html”中給h1定了“＃important”,也可以給“test1.html”中定義p的id為"#important"，但前提是不管在test.html還是test1.html中只充許有一個id叫"#important"的存在。
所有瀏覽器都支援ID選取器。

7、後代選取器（Ｅ Ｆ）

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

 

.demo li {color: blue;}

 

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

所有瀏覽器都支的後代選取器。

8、子項目選取器(E>F)

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

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

效果如下：

IE6不支援子項目選取器。

9、相鄰兄弟元素選取器(E + F)

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

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

上面代碼錶示選擇li的相鄰元素li，我們這裡一共有十個li，那麼上面的代碼選擇了從第2個li到 10 個li，一共九個，請看效果：

IE6不支援兄弟元素選取器

10、通用兄弟選取器（Ｅ ? Ｆ）

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

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

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

通用兄弟選取器和相鄰兄弟選取器極其相似，只不過，相鄰兄弟選取器僅選擇是元素的僅與其相鄰的後面元素（選中的僅一個元素）；而通用兄弟元素選取器，選中的是元素相鄰的後面兄弟元素，這樣說起來可能會有迷糊，大家可以仔細看看其相鄰兄弟的。
IE6不支援這種選取器的用法。

11、群組選取器（selector1,selector2,...,selectorN）

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

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

因為li.first和li.last具有相同的樣式效果，所以我們把他們寫到一個組裡來：

所有瀏覽器都支援群組選取器。

上面九種選取器是CSS3中的基本選取器，而我們最常用的是元素選取器、類別選取器、ID選取器、後代選取器、群組選取器，同時大家可以在實際應用中把這些選取器結合起來使用，達到目的就行了。