基礎概念

CSS 屬性選擇器 通過已經存在的屬性名或屬性值匹配元素。

語法

[attr] 表示帶有以attr命名的屬性元素

[attr=value]表示帶有以attr命名的屬性，且屬性值為value的元素

[attr~=value]表示帶有以attr命名的屬性的元素，並且概述是一個以空格作為分割的致值列表，其中至少有一個值為value。

[attr|=value]表示帶有以 attr 命名的屬性的元素，屬性值為“value”或是以“value-”為字首（"-"為連字元，Unicode 編碼為 U+002D）開頭。典型的應用場景是用來匹配語言簡寫程式碼（如 zh-CN，zh-TW 可以用 zh 作為 value）。

[attr^=value]表示帶有以 attr 命名的屬性，且屬性值是以 *value *開頭的元素。

[attr$=value]表示帶有以 attr 命名的屬性，且屬性值是以 *value *結尾的元素。

[attr*=value]表示帶有以 attr 命名的屬性，且屬性值至少包含一個 *value *值的元素。

[attr operator value i]在屬性選擇器的右方括號前新增一個用空格隔開的字母 i（或 I），可以在匹配屬性值時忽略大小寫（支援 ASCII 字元範圍之內的字母）。

示例

CSS

a{
    color: blue;
}

/* #開頭的頁面本地連結 */
a[href^='#']{
    background-color: gold;
}

/* 包含 example的連結 */
a[href*="example"]{
    background-color: silver;
}

/* 包含 insensitive的連結，不區分大小寫 */
a[href*="insensitive" i]{
    color: cyan;
}

/* 包含 `cAsE`的連結，區分大小寫 */
a[href*="cAsE" s]{
    color: pink
}

/* 以 ".org" 結尾的連結 */
a[herf$=".org"]{
    color: red;
}
 

HTML

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

 

效果實現

程式碼截圖

CSS

HTML

參考連結

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors