摘 要：在“互聯(lián)網(wǎng)+”的大時(shí)代下，CSS樣式表對(duì)于網(wǎng)站開發(fā)發(fā)揮著舉足輕重的作用。所謂CSS選擇器是指屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素，也是CSS樣式表的核心理念。本文對(duì)CSS的選擇器做了詳細(xì)分析。

關(guān)鍵詞：CSS代碼;CSS選擇器;代碼規(guī)范;代碼優(yōu)化;web應(yīng)用

一、標(biāo)簽選擇器

標(biāo)簽選擇器：標(biāo)簽選擇器直接使用html標(biāo)簽作為選擇器，是CSS樣式表中最常見而且最基本的選擇器。

如：p{color：red;} 或者 li{color：red;}

二、類選擇器

類選擇器是以一種獨(dú)立于文檔元素的方式來指定樣式，同時(shí)在使用類選擇器之前需要在html元素上定義類名。

如：HTML：

三、ID選擇器

ID選擇器類似于類選擇器，也需要在html頁(yè)面定義id 名。但是二者還是有很大區(qū)別的。

a.開頭符號(hào)不同，類選擇器是以點(diǎn)“.”開頭，而ID選擇器是以“#”開頭，如#main{}

b.使用次數(shù)不同，類名可以在同一個(gè)html中多次出現(xiàn)，而ID選擇器在同一個(gè)html中只能出現(xiàn)一次。

四、CSS屬性選擇器

CSS屬性選擇器是指根據(jù)元素的屬性及屬性值來選擇元素。屬性選擇器主要包括以下幾種：

a.E[attr]：只使用屬性名，但沒有確定任何屬性值;這個(gè)是屬性選擇器中最簡(jiǎn)單的一種。

如：.Main a[id]{color：red;}，其含義為，選擇了div.Main下所有帶有id屬性的a元素。

b.E[attr="value"]：指定屬性名，并指定了該屬性的屬性值，從而縮小了選擇的范圍，更精確的找到目標(biāo)元素。

c.E[attr～="value"]：指定屬性名，并且具有屬性值，在html中此屬性的屬性值可以是多個(gè)值，并且以空格隔開，同時(shí)包含了一個(gè)所定義的屬性值value，那么就可以進(jìn)行匹配;

d.E[attr^="value"]：指定了屬性名，并且有屬性值，屬性值是以value開頭的;

e.E[attr$="value"]：指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的;

f.E[attr*="value"]：指定了屬性名，并且有屬性值，而且屬值中包含子串"value"的所有元素;

g.E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開頭的值。

五、CSS后代選擇器

CSS后代選擇器又稱為包含選擇器，是指選擇某元素后代的元素。

如：h1 span{} 基本的語(yǔ)法我們可以理解為，h1標(biāo)簽下所有span 元素應(yīng)用該樣式。

但是如：CSS div#divBox p span.red{color：red;} 瀏覽器判斷的順序?yàn)槭欠裼衏lass=red的span標(biāo)簽，并且父級(jí)標(biāo)簽為p，p標(biāo)簽的父級(jí)為id=divBox的div，如果上述條件都能夠滿足，那么則進(jìn)行匹配。瀏覽器之所以這樣進(jìn)行查找是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。

六、子元素選擇器

子元素選擇器與后代選擇器相比，子元素選擇器只能選擇作為某元素子元素的元素。

如：CSS h1 span{color：red}

HTML

This is very very important.

This is really very important.

在這個(gè)例子里第一個(gè)h1標(biāo)簽里的span會(huì)匹配應(yīng)用樣式，而第二個(gè)h1里的span屬于h1的后代元素，所以不會(huì)進(jìn)行匹配。

七、CSS 相鄰兄弟選擇器

CSS 相鄰兄弟選擇器可選擇緊接在另一元素后的元素，且二者有相同父元素。相鄰兄弟選擇器使用了加號(hào)（+），并且加號(hào)兩旁要有空白符。

如：HTML

CSS li{ float：left; list-style：none;} li + li { font-weight：bold;}

顯示結(jié)果為 text 1 text 2text 3

由此可見，上面這個(gè)選擇器只會(huì)把列表中的第二個(gè)和第三個(gè)列表項(xiàng)變?yōu)榇煮w。第一個(gè)列表項(xiàng)不受影響。

八、CSS 偽類

CSS 偽類用于向某些選擇器添加特殊的效果。偽類選擇元素基于的是當(dāng)前元素處于的狀態(tài)，或者說元素當(dāng)前所具有的特性，而不是元素的id、class、屬性等靜態(tài)的標(biāo)志。由于狀態(tài)是動(dòng)態(tài)變化的，所以一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類的樣式;當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。由此可以看出，它的功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類。

九、CSS 偽元素

CSS 偽元素用于向某些選擇器設(shè)置特殊效果。

與偽類針對(duì)特殊狀態(tài)的元素不同的是，偽元素是對(duì)元素中的特定內(nèi)容進(jìn)行操作，它所操作的層次比偽類更深了一層，也因此它的動(dòng)態(tài)性比偽類要低得多。實(shí)際上，設(shè)計(jì)偽元素的目的就是去選取諸如元素內(nèi)容第一個(gè)字（母）、第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無法完成的工作。它控制的內(nèi)容實(shí)際上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽元素。

十、結(jié)語(yǔ)

css選擇器用法比較豐富，而且在工作當(dāng)中一般一個(gè)頁(yè)面需要設(shè)置多種的CSS樣式，選擇器可以更好的適應(yīng)工作的需要，選擇器合理的使用可使得元素定位更加精準(zhǔn)、設(shè)置特別樣式更加方便。

參考文獻(xiàn)：

[1]安迪·巴德（Andy Budd）.精通CSS 高級(jí)Web標(biāo)準(zhǔn)解決方案（第3版）.人民郵電出版社，2019-02-01.

[2]Eric，A.，Meyer，Estelle，Weyl.CSS權(quán)威指南.中國(guó)電力出版社，2019-05-01.

[3]Lea Verou.CSS揭秘.人民郵電出版社，2016-04-01.

[4]陸凌牛.HTML 5與CSS 3權(quán)威指南.機(jī)械工業(yè)出版社，2019-03-01.

作者簡(jiǎn)介：李廣宏，男，研究方向：信息化、系統(tǒng)運(yùn)維、網(wǎng)站開發(fā)。