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 字符范围之内的字母）。
[*attr* *operator* *value* s]
在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 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[href$=".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>
结果
另外
由于 type 属性主要用于 <input> 元素，因此 HTML 规范要求 type 属性的匹配不区分大小写，如果使用属性选择器且添加了 大小写敏感 的修饰符，那么将无法与type属性进行匹配。
属性选择器 – CSS（层叠样式表） | MDN