那么從現(xiàn)在開(kāi)始我們先丟開(kāi)他們版本的區(qū)別，從頭一起來(lái)看看CSS選擇器的運(yùn)用。

CSS是一種用于屏幕上渲染html，xml等一種語(yǔ)言，CSS主要是在相應(yīng)的元素中應(yīng)用樣式，來(lái)渲染相對(duì)應(yīng)用的元素，那么這樣我們選擇相應(yīng)的元素就很重要了，如何選擇對(duì)應(yīng)的元素，此時(shí)就需要我們所說(shuō)的選擇器。選擇器主要是用來(lái)確定html的樹(shù)形結(jié)構(gòu)中的DOM元素節(jié)點(diǎn)。我把CSS選擇器分開(kāi)成三部分，第一部分是我們常用的部分，我把他叫做基本選擇器；第二部分我把他稱(chēng)作是屬性選擇器，第三部分我把他稱(chēng)作偽類(lèi)選擇器，這一部分也是最難理解和掌握的部分，今天我們先來(lái)看第一部分——基本選擇器。我們先來(lái)看一個(gè)常用的選擇器列表圖

下面我們先看看上表中基本的選擇器的使用方法和其所起的作用，為了更好的說(shuō)明問(wèn)題，先創(chuàng)建一個(gè)簡(jiǎn)單的DOM結(jié)構(gòu)，如下：


給這個(gè)demo加上一些樣式，讓他好看一點(diǎn)


初步效果如下所示：

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


上面代碼大家在reset樣式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都設(shè)置為0，另外一種就是選擇某個(gè)元素下的所有元素：


效果如下；

從上面的效果圖看，只要是div.demo下的元素邊框都加上了新的樣式。所有瀏覽器支持通配符選擇器。

二、元素選擇器(E)
元素選擇器，是css選擇器中最常見(jiàn)而且最基本的選擇器。元素選擇器其實(shí)就是文檔的元素，如html,body,p,div等等，比如我們這個(gè)demo：中元素包括了div,ul,li等。


上在表示選擇頁(yè)面的li元素，并設(shè)置了背景色和前景色，效果如下：

所有瀏覽器支持元素選擇器(E)。

三、類(lèi)選擇器（.className）
類(lèi)選擇器是以一獨(dú)立于文檔元素的方式來(lái)指定樣式，使用類(lèi)選擇器之前需要在html元素上定義類(lèi)名，換句話(huà)說(shuō)需要保證類(lèi)名在html標(biāo)記中存在，這樣才能選擇類(lèi)，如：

<li class="active important items">2</li>
共中“active,important, items”就是我們以類(lèi)給li加上一個(gè)類(lèi)名，以便類(lèi)選擇器能正常工作，從而更好的將類(lèi)選擇器的樣式與元素相關(guān)聯(lián)。

.important {font-weight: bold; color: yellow;}
上面代碼表示是給有important類(lèi)名的元素加上一個(gè)“字體為粗體，顏色為黃色”的樣式，如

類(lèi)選擇器還可以結(jié)合元素選擇器來(lái)使用，比如說(shuō)，你文檔中有好多個(gè)元素使用了類(lèi)名“items”，但你只想在p元素這個(gè)類(lèi)名上修改樣式，那么你可以這樣進(jìn)行選擇并加上相應(yīng)的樣式：
p.items {color: red;}
上面代碼只會(huì)匹配class 屬性包含important 的所有p 元素，但其他任何類(lèi)型的元素都不匹配，包括有“items”這個(gè)類(lèi)名的元素，上面也說(shuō)過(guò)了“p.items”只會(huì)對(duì)p元素并且是其有一個(gè)類(lèi)名叫“items”。不符合這兩個(gè)條件的都不會(huì)被選擇。

類(lèi)選擇器還有可以具備多類(lèi)名，上面我們也看到了，我們li元素中同時(shí)有兩個(gè)或多少類(lèi)名，其中他們以空格隔開(kāi)，那么選擇器也可以使用多類(lèi)連接在一起，如：

正如上面的代碼所示，".important.items"這個(gè)選擇器只對(duì)元素中同時(shí)包含了"important"和"items"兩個(gè)類(lèi)才能起作用，如圖所示：

有一點(diǎn)大家需要注意，如果一個(gè)多類(lèi)選擇器包含的類(lèi)名中其中有一個(gè)不存在，那么這個(gè)選擇器將無(wú)法找到相匹配的元素 比如說(shuō)下在這句代碼，他就無(wú)法到找相對(duì)應(yīng)的的元素標(biāo)簽，因?yàn)槲覀兞斜碇兄挥幸粋€(gè)li.first和一個(gè)li.last，不存在有一個(gè)叫l(wèi)i.first.last的列表項(xiàng)：

所有瀏覽器都支持類(lèi)選擇器，但多類(lèi)選擇器（.className1.className2）不被ie6支持。

四、id選擇器（#ID）
ID選擇器和上面說(shuō)的類(lèi)選擇器是很相似的，在使用ID選擇器之前也需要先在html文檔中加注ID名稱(chēng)，這樣在樣式選擇器中才能找到相對(duì)應(yīng)的元素，不同的是ID選擇器是一個(gè)頁(yè)面中唯一的值，我們?cè)陬?lèi)使用時(shí)是在相對(duì)應(yīng)的類(lèi)名前加上一個(gè)“.”號(hào)（.className）而id選擇器是在名稱(chēng)前使用"#"如(#id),


上在的代碼就是選擇了id為"first"和"last"的列表項(xiàng)，其效果如下

ID選擇器有幾個(gè)地方需要特別注意的，第一：一個(gè)文檔中一個(gè)id選擇器只充許使用一次，因?yàn)閕d在頁(yè)面中是唯一的；第二，id選擇器不能像類(lèi)選擇器一樣多個(gè)合并使用，一個(gè)元素只能命名一個(gè)id名；第三，可以在不同的文檔中使用相同的id名，比如說(shuō)在“test.html”中給h1定了“＃important”,也可以給“test1.html”中定義p的id為"#important"，但前提是不管在test.html還是test1.html中只充許有一個(gè)id叫"#important"的存在。

所有瀏覽器都支持ID選擇器。

那么什么時(shí)候采用id命名？什么時(shí)候采用類(lèi)命名呢？我個(gè)人認(rèn)為就是關(guān)鍵的一點(diǎn)就是具有唯一性使用id選擇器；公用的，類(lèi)似的使用類(lèi)選擇器。使用這兩個(gè)選擇器時(shí)，最好區(qū)別大小寫(xiě)。

五、后代選擇器（Ｅ Ｆ）

后代選擇器也被稱(chēng)作包含選擇器,所起作用就是可以選擇某元素的后代元素，比如說(shuō):E F，前面E為祖先元素，Ｆ為后代元素，所表達(dá)的意思就是選擇了Ｅ元素的所有后代Ｆ元素，請(qǐng)注意他們之間需要一個(gè)空格隔開(kāi)。這里Ｆ不管是E元素的子元素或者是孫元素或者是更深層次的關(guān)系，都將被選中，換句話(huà)說(shuō)，不論Ｆ在Ｅ中有多少層關(guān)系，都將被選中：

.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)

相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且他們具有一個(gè)相同的父元素，換句話(huà)說(shuō)，EF兩元素具有一個(gè)相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相鄰，這樣我們就可以使用相鄰兄弟元素選擇器來(lái)選擇Ｆ元素。

上面代碼表示選擇li的相鄰元素li，我們這里一共有十個(gè)li，那么上面的代碼選擇了從第2個(gè)li到 10 個(gè)li，一共九個(gè)，請(qǐng)看效果：

因?yàn)樯厦娴膌i+li其中第二li是第一li的相鄰元素，第三個(gè)又是第二個(gè)相鄰元素，因此第三個(gè)也被選擇，依此類(lèi)推，所以后面九個(gè)li都被選中了，如果我們換過(guò)一種方式來(lái)看，可能會(huì)更好的理解一點(diǎn)：

按照前面所講的知識(shí)，這句代碼很明顯選擇了li.active后面相鄰的li元素，注意了和li.active后面相鄰的元素僅只有一個(gè)的。如圖：

IE6不支持這個(gè)選擇器

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

通用兄弟元素選擇器是CSS3新增加一種選擇器，這種選擇器將選擇某元素后面的所有兄弟元素，他們也和相鄰兄弟元素類(lèi)似，需要在同一個(gè)父元素之中，換句話(huà)說(shuō)，E和F元素是屬于同一父元素之內(nèi)，并且F元素在Ｅ元素之后，那么E ~ F 選擇器將選擇中所有Ｅ元素后面的Ｆ元素。比如下面的代碼：

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

通用兄弟選擇器和相鄰兄弟選擇器極其相似，只不過(guò)，相鄰兄弟選擇器僅選擇是元素的僅與其相鄰的后面元素（選中的僅一個(gè)元素）；而通用兄弟元素選擇器，選中的是元素相鄰的后面兄弟元素，這樣說(shuō)起來(lái)可能會(huì)有迷糊，大家可以仔細(xì)看看其相鄰兄弟的效果圖。

IE6不支持這種選擇器的用法。

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

群組選擇器是將具有相同樣式的元素分組在一起，每個(gè)選擇器之間使用逗號(hào)“，”隔開(kāi)，如上面所示selector1,selector2,...,selectorN。這個(gè)逗號(hào)告訴瀏覽器，規(guī)則中包含多個(gè)不同的選擇器，如果不有這個(gè)逗號(hào)，那么所表達(dá)的意就完全不同了，省去逗號(hào)就成了我們前面所說(shuō)的后代選擇器，這一點(diǎn)大家在使用中千萬(wàn)要小心加小心。我們來(lái)看一個(gè)簡(jiǎn)單的例子：

因?yàn)閘i.first和li.last具有相同的樣式效果，所以我們把他們寫(xiě)到一個(gè)組里來(lái)：

所有瀏覽器都支持群組選擇器。

上面九種選擇器是CSS3中的基本選擇器，而我們最常用的是元素選擇器、類(lèi)選擇器、ID選擇器、后代選擇器、群組選擇器，同時(shí)大家可以在實(shí)際應(yīng)用中把這些選擇器結(jié)合起來(lái)使用，達(dá)到目的就行了。那么關(guān)于CSS3選擇器的第一部分——基本選擇器就介紹到這里，有點(diǎn)簡(jiǎn)單，希望對(duì)初次接觸CSS的同學(xué)有所幫助，下節(jié)將介紹CSS3選擇器的第二部分——屬性選擇器，感興趣的朋友請(qǐng)觀注本站的更新。

如需轉(zhuǎn)載煩請(qǐng)注明出處：W3CPLUS

最新評(píng)論