CSS: 属性选择器

基础概念

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>