属性选择器

• [attribute] 匹配指定属性，不论具体值是什么
• [attribute="value"] 完全匹配指定属性值
• [attribute~="value"] 属性值是以空格分隔的多个单词，其中有一个完全匹配指定值
• [attribute|="value"] 属性值以value-打头
• [attribute^="value"] 属性值以value开头，value为完整的单词或单词的一部分
• [attribute$="value"] 属性值以value结尾，value为完整的单词或单词的一部分
• [attribute*="value"] 属性值为指定值的子字符串

修饰符

属性修饰器支持i修饰符，表示不区分大小写。

[class=foo i] {
  color: red;
}

上面代码中，属性名foo后面的i，表示不区分foo的大小写，所以下面几个 class 都会匹配。

<div class="foo">...</div>
<div class="Foo">...</div>
<div class="fOo">...</div>

这个修饰符对于匹配用户的输入，非常有用。

/**
 * 匹配：
 * <input value="hello world">
 * <input value="hello World">
 * <input value="hElLo WoRlD">
 * ...
 */
[value="hello world" i] { /* ... */ }

参考链接

• The CSS attribute selector has a case-insensitive mode

---

本教程来自“网道项目”（wangdoc.com），采用知识共享 署名-相同方式共享 3.0协议。