css屬性選擇器的使用方法

這篇文章主要介紹css屬性選擇器的使用方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

css 屬性選擇器是什么？有什么用？

在HTML中的元素都可以具有屬性，這些屬性是顯示或修改其行為的附加值。html中包含許多屬性，但不是所有HTML元素都適用所有的屬性。與元素無關的屬性不會對它有任何影響。

不管該屬性是否能正確的應用，你仍然可以通過CSS選擇它。但是，在網站上任何地方使用無效的HTML屬性都是非常糟糕的做法，因為不同的瀏覽器對無效HTML的解析是不同的。你不能責怪瀏覽器讓你的網站看起來很奇怪，他們只是想通過填補空白來解釋你的錯誤代碼。

而，css的屬性選擇器允許我們選擇具有特定屬性或特定值屬性的元素，即：可以根據指定的屬性名稱找到對應的標簽，然后設置屬性。【相關視頻教程推薦：css3教程】

css 屬性選擇器的使用

在html中屬性值必須是標識符或字符串。該規范相當模糊，因為它指出選擇器中屬性名稱和值的區分大小寫取決于文檔語言。由于瀏覽器行為不一致這一事實，最安全的做法是確保所使用的案例在CSS和HTML之間保持一致。

屬性選擇器可以有7種方式匹配（從CSS3規范開始）：

1、[<attribute>]

定位所有包含<attribute>屬性的元素，無論其值是多少。

例：

<div data-colour="green"></div>
<div data-colour="blue"></div>
<div data-colour="yellow"></div>

css代碼選擇：

[data-colour] { 
   /* 一些性質，例：color..... */ 
}

2、[<attribute>=<value>]

定位所有<attribute>屬性值為<value>的元素。

<div data-colour="green"></div>

[data-colour="green"] { 
    /* 一些性質 */ 
}

3、[<attribute>~=<value>]

使用<attribute>屬性定位元素，其值為空格分隔的單詞列表，其中一個必須為<value>。

<value>本身不能包含空格，也不能是空字符串。

<div data-colour="green yellow blue"></div>

[data-colour~="green"] { 
    /* 一些性質 */ 
}

4、[<attribute>|=<value>]

使用<attribute>屬性定位元素，其值正好<value>或以<value>開頭，后跟“ - ”。

注：主要用于語言子碼匹配中，如“en”，“en-US”和“en-UK”。

<div data-colour="green-table"></div>
<div data-colour="green-chair"></div>
<div data-colour="green-bottle"></div>

[data-colour|="green"] { 
    /* 一些性質 */ 
}

5、[<attribute>^=<value>]

子串匹配選擇器。使用<attribute>屬性定位元素，其值以<value>開頭。

注：<value>不能是空字符串。

<div data-colour="greenish-yellow"></div>
<div data-colour="greengoblin"></div>

[data-colour^="green"] { 
    /* 一些性質 */ 
}

6、[<attribute>$=<value>]

子串匹配選擇器。使用<attribute>屬性定位元素，其值以<value>結尾。

注：<value>不能是空字符串。

<div data-colour="yellowish-green"></div>
<div data-colour="seagreen"></div>

[data-colour$="green"] { 
    /* 一些性質 */ 
}

7、[<attribute>*=<value>]

子串匹配選擇器。使用<attribute>屬性定位元素，其值包含<value>的實例。

注：<value>不能是空字符串。

<div data-colour="goblingreenish"></div>

[data-colour*="green"]{ 
    /* 一些性質 */ 
}

組合屬性選擇器

屬性選擇器具有與類和偽類相同的特定級別；你可以將屬性選擇器與其他選擇器（如元素，類或ID）組合在一起。例：

div[data-colour="green"] {
  /* 特異性為11 */
}
.swatch[data-colour="green"] {
  /* 特異性為20 */
}
#tile25[data-colour="green"] {
  /*特異性為110 */
}

你還可以組合多個屬性選擇器以匹配特定模式。例如，如果您只想使用包含單詞“green”的替換文字定位2x圖像，則你的選擇器將如下所示：

img[srcset~="2x"][alt*="green"] { 
    /* 一些性質 */ 
}

此外，由于屬性值是作為字符串讀取的，因此你不必擔心轉義特殊字符以使它們匹配，這是與類或ID不同。這意味著我們可以自由地擁有以下內容：

[data-emotion="
以上就是css的屬性選擇器是什么？屬性選擇器的使用的詳細內容，更多請關注億速云其它相關文章！

以上是css屬性選擇器的使用方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！