一文快速讀懂CSS選擇器之屬性選擇器

常用CSS選擇器說明及實例分析

CSS選擇器（Selector）是用於實現網頁頁面定義的基礎，選擇器的主要作用在於確定指定的單個元素或者一類元素。在獲取元素之後即可以對所獲取的元素進行樣式的定義。最終為用戶呈現不同交互視覺風格的前端頁面。本文主要對常用CSS選擇器基本概念與常用屬性選擇器進行說明與實例展示。

CSS Selector類型劃分

按照W3C技術規範劃分目前CSS Selector主要類型可以劃分為基本選擇器、關係選擇器、偽選擇器三種類型不同的選擇器。目前主要CSS選擇器類型及分類描述如下圖所示：

CSS Selector分類圖

CSS Selector選擇器主要分類描述如上圖，其中我們較為常用的選擇器主要包括基本選擇器、關係選擇器及偽選擇器中的部分類型。總之，一句話概括的話：選擇器的作用就是從HTML文檔中找出需要設置樣式的一個或者多個HTML元素。

基本常用選擇器

本文中我們選取部分常用選擇器對其語法進行簡單說明，並通過實例進行應用說明與展示。

（一）基本選擇器

基本選擇器中元素選擇器、類選擇器與ID選擇器是較為常用選擇器，也是大部分教材中詳細介紹過的選擇器類型。常用基本選擇器描述如下圖：

基本選擇器中常用類型說明

屬性選擇器

在基本選擇器中以上4類為常用選擇器，除此之外初學者使用較少但非常重要的選擇器為屬性選擇器。屬性選擇器主要根據元素的屬性確定選擇元素並進行樣式的設置。屬性選擇器主要類型包括7種不同類型選擇器，描述如下圖所示：

CSS屬性選擇器

CSS屬性選擇器常用的其中方法描述如上圖所示，通過屬性值的選擇方式確定選中的元素，進而實現元素樣式的設置。屬性選擇器說明如下：

屬性選擇器說明

以下我們通過實例進行說明，HTML代碼描述如下：

實例說明HTML代碼

我們在頁面中添加6個不同層，並設置其基本樣式，如上圖所示，通過使用屬性選擇器實現樣式的改變。原始頁面效果如下圖：

原始頁面效果

1、[attr]選擇器

該選擇器主要根據屬性名稱確定選中的標記，並對其進行設置。我們將示例文件中的前三個div設置ID屬性並以此為選擇條件進行DIV樣式修改。代碼部分如下：

<div id="a">1</div>

<div id="2">2</div>

<div id="3">3</div>

編寫選擇器如下：

[id]{background-color: red;}

通過該選擇器的使用可以準確找到需要設置樣式的元素。最終實現效果如下圖所示：

[attr]選擇器

2、[attr=value]選擇器

以第一種選擇器相比較除屬性名稱之外還需要滿足取值等於value。如我們需要將上例中id值為2的DIV進行樣式設置，則可直接編寫選擇器：

[attr="2"]{background-color:red;}

通過value值對attr屬性進行篩選，最終找到符合條件的DIV實現背景顏色變化。測試效果如下：

[attr=value] 選擇器

3、[attr~=value]選擇器

該選擇器可以選擇對應屬性attr的值為列表形式，且值列表中包含value值。如我們在定義樣式中對於多個類選擇器的使用一般寫法如下：

<div id="4">4</div>

上述代碼即符合多個屬性值，中間空格隔開，因此我們可以編寫選擇器實現對這個DIV的選擇。實現代碼如下：

[class~="cl2"]{font-size: 36px;color:white; background-color: blue;}

我們選中該DIV實現樣式設置，最終呈現效果如下：

[attr~=value]選擇器

4、[attr|=value]選擇器

該選擇器主要對attr屬性取值為value或者以value-為前綴的元素進行選擇。我們將第五個DIV代碼進行修改描述如下：

<div>5</div>

如果要選擇這個DIV我們可以編寫以下選擇器，代碼如下：

[class|="pure"]{font-size: 36px;color:white; background-color: gray;}

通過以上選擇器及樣式編寫，可將第五個DIV樣式進行修改，顯示結果如下：

[attr|=value]選擇器

5、[attr^=value]選擇器

該選擇器基本與|value選擇器類似，只是要求取值為value開頭的值。我們修改第六個DIV的代碼如下：

<div id="mytest">6</div>

通過編寫選擇器，在value中包含my進行測試，選擇器代碼如下：

[id^="my"]{font-size: 36px;color:white; background-color: yellow;}

代碼中我們修改了背景顏色為黃色，測試結果如下所示：

[attr^=value]選擇器

6、[attr*=value]選擇器

該選擇器要求屬性attr對應的屬性值中包含value，如果包含則選中該元素。我們將第二個DIV進行代碼編寫，如下：

<div>2</div>

我們定義如下選擇器：

[class*="val1"]{background-color:magenta;}

通過以上選擇器我們可以選中第二個DIV，並實現樣式設置，我們將背景顏色改為magenta。實現效果如下：

[attr*=value]選擇器

7、[attr$=value]選擇器

該方法用於選擇attr屬性值中以value結尾的元素。我們將第三個DIV代碼進行修改，如下：

<div id="mylast">3</div>

編寫選擇器代碼如下：

[id$="last"]{background-color:steelblue;}

通過該選擇器可以選擇第三個DIV並對其背景顏色進行設置，測試結果如下：

[attr$=value]選擇器

以上給出了常用的基本屬性選擇器與屬性選擇器的說明及實例分析。下篇文章我們將對關係選擇器進行說明。

本百家號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章連結如下：

Web前端設計-JavaScript動態設置CSS樣式實例分析

前端設計-JavaScript實現複選框的分組單選