摘 要：在“互聯網+”的大時代下，CSS樣式表對于網站開發發揮著舉足輕重的作用。所謂CSS選擇器是指屬性選擇器可以根據元素的屬性及屬性值來選擇元素，也是CSS樣式表的核心理念。本文對CSS的選擇器做了詳細分析。

關鍵詞：CSS代碼;CSS選擇器;代碼規范;代碼優化;web應用

一、標簽選擇器

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

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

二、類選擇器

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

如：HTML：

三、ID選擇器

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

a.開頭符號不同，類選擇器是以點“.”開頭，而ID選擇器是以“#”開頭，如#main{}

b.使用次數不同，類名可以在同一個html中多次出現，而ID選擇器在同一個html中只能出現一次。

四、CSS屬性選擇器

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

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

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

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

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

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

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

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

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

五、CSS后代選擇器

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

如：h1 span{} 基本的語法我們可以理解為，h1標簽下所有span 元素應用該樣式。

但是如：CSS div#divBox p span.red{color：red;} 瀏覽器判斷的順序為是否有class=red的span標簽，并且父級標簽為p，p標簽的父級為id=divBox的div，如果上述條件都能夠滿足，那么則進行匹配。瀏覽器之所以這樣進行查找是為了盡早過濾掉一些無關的樣式規則和元素。

六、子元素選擇器

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

如：CSS h1 span{color：red}

HTML

This is very very important.

This is really very important.

在這個例子里第一個h1標簽里的span會匹配應用樣式，而第二個h1里的span屬于h1的后代元素，所以不會進行匹配。

七、CSS 相鄰兄弟選擇器

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

如：HTML

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

顯示結果為 text 1 text 2text 3

由此可見，上面這個選擇器只會把列表中的第二個和第三個列表項變為粗體。第一個列表項不受影響。

八、CSS 偽類

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

九、CSS 偽元素

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

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

十、結語

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

參考文獻：

[1]安迪·巴德（Andy Budd）.精通CSS 高級Web標準解決方案（第3版）.人民郵電出版社，2019-02-01.

[2]Eric，A.，Meyer，Estelle，Weyl.CSS權威指南.中國電力出版社，2019-05-01.

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

[4]陸凌牛.HTML 5與CSS 3權威指南.機械工業出版社，2019-03-01.

作者簡介：李廣宏，男，研究方向：信息化、系統運維、網站開發。