css的屬性選擇器是什麼？屬性選擇器的使用

css的屬性選擇器是什麼？本篇文章就跟大家談談css的屬性選擇器，讓大家了解屬性選擇器的作用是什麼，如何使用。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

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

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

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

而，css的屬性選擇器允許我們選擇具有特定屬性或特定值屬性的元素，即：可以根據指定的屬性名稱找到對應的標籤，然後設定屬性。 【相關影片教學建議：css3教學】

css 屬性選擇器的使用

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

屬性選擇器可以有7種方式來符合（從CSS3規格開始）：

1、[e8aa4f7ce323535a9b01247c46fe6139]##就定位所有包含e8aa4f7ce323535a9b01247c46fe6139屬性的元素，無論其值為何。

範例：

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

css程式碼選擇：

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

2、[e8aa4f7ce323535a9b01247c46fe6139=8487820b627113dd990f63dd2ef215f3]

#定位所有e8aa4f7ce323535a9b01247c46fe6139屬性值為8487820b627113dd990f63dd2ef215f3的元素。

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

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

3、[e8aa4f7ce323535a9b01247c46fe6139~=8487820b627113dd990f63dd2ef215f3]

使用e8aa4f7ce323535a9b01247c46fe6139屬性定位元素，其值為空格分隔的單字列表，其中一個必須為8487820b627113dd990f63dd2ef215f3。

8487820b627113dd990f63dd2ef215f3本身不能包含空格，也不能是空字串。

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

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

4、[e8aa4f7ce323535a9b01247c46fe6139|=8487820b627113dd990f63dd2ef215f3]

##使用e8aa4f7ce323535a9b01247c46fe6139屬性定位元素，其值剛好8487820b627113dd990f63dd2ef215f3或以8487820b627113dd990f63dd2ef215f3開頭，後面跟著“ - ”。

註：主要用於語言子碼匹配中，如“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、[e8aa4f7ce323535a9b01247c46fe6139^=8487820b627113dd990f63dd2ef215f3]

##子字串符合選擇器。使用e8aa4f7ce323535a9b01247c46fe6139屬性定位元素，其值以8487820b627113dd990f63dd2ef215f3開頭。 註：8487820b627113dd990f63dd2ef215f3不能是空字串。

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

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

6、[e8aa4f7ce323535a9b01247c46fe6139$=8487820b627113dd990f63dd2ef215f3]

##子字串符合選擇器。使用e8aa4f7ce323535a9b01247c46fe6139屬性定位元素，其值以8487820b627113dd990f63dd2ef215f3結尾。

註：8487820b627113dd990f63dd2ef215f3不能是空字串。

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

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

7、[e8aa4f7ce323535a9b01247c46fe6139*=8487820b627113dd990f63dd2ef215f3]

##子字串符合選擇器。使用e8aa4f7ce323535a9b01247c46fe6139屬性定位元素，其值包含8487820b627113dd990f63dd2ef215f3的實例。

註：8487820b627113dd990f63dd2ef215f3不能是空字串。

<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的屬性選擇器是什麼？屬性選擇器的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！