CSS 中有一些属性选择器，不常见，但是偶尔有一些小众的需求，实现起来会很方便。特别是在进行 Cypress 开发的时候，直接使用 JavaScript 查找元素比较困难，但是有了这些属性选择器，就可以很方便的通过 jQuery 的 API 进行元素的定位了。
属性选择器和一些可能的应用场景，列举如下：
attr
表示带有以 attr 命名的属性元素。这个选择器不关心属性具体的值，只要有，就会被选中。一些常见的应用场景包括：
- 选择一些没有值的属性，比如
<input disabled />可以通过input[disabled]进行选择； - 选择一些带有属性的元素，属性具体的值并不关心。这种情况中，带有某种属性往往表示这类元素同属于一个类型组件，如一组列表中的每个元素，都会有一个子节点上带有
title属性以显示 tooltip，此时就可以通过类似ul li [title]的方式，将这些文字都选出来，或是进行进一步的选择。
attr=value
表示带有以 attr 命名的属性，并且该属性的值是 value。这个的应用场景比较常见，一般的属性选择都会使用这个方案。值得注意的一点是，由于 CSS 选择器权重的关系，以下两个 CSS 定义是有不同优先级的：
#id {
color: red;
}
[id=id] {
color: blue;
}最终的元素 <p id="id">Hello World</p> 显示颜色是红色，而不是蓝色。因为属性选择器的优先级比 id 选择器要低，即使两者表达的意思是一样的。
attr^=prefix
这个选择器可以将所有以 prefix 开头的 attr 属性所在的元素都选出来。^ 表示开头，这一点和正则表达式中的表述语义是类似的。可以设想这样一个应用场景：
在某个页面上，可能要根据一组数据显示对应的表单数据。因为每个表单中的输入项都需要一个 label + input 的组合，因而每个 input 可能需要给一个独一无二的 ID（方便 label 上加上 for 以绑定两者）。这时候，一个简单的做法，是给每一个表单中固定的输入项，取一个固定的前缀，再加上这个数据本身的 id 值，最终生成一个独一无二的 ID，防止重复。比如，数据 { id: 1, name: 'John' } 生成的名字 input 可能为：<input id="user-name-1" />。
针对这种情况，如果希望一次性选出所有这些 input，就可以使用属性选择器：[id^=user-name]。
attr|=prefix
上面的这个例子，也可以用这个属性选择器来进行改写：[id|=user-name]。两者都可以定义属性的前缀用于查找元素，但是区别在于，|= 的选择器规定的前缀之后一定跟着一个 - 字符。因此，[id|=user-name] 可以选出 <input id="user-name-1" /> 但是不能选出 <input id="user-name_1" />。这一点是和上面这个选择器最大的不同。当然，这个选择器最大的应用场景其实还是在选择 lang 上，比如将当前页面中所有英文的部分选择出来：[lang|=en]，此时，无论是 <p lang="en-US">Color</p> 还是 <p lang="en-GB">Colour</p> 都可以被正确的选择出来。
attr$=suffix
这个选择器可以将所有以 suffix 结尾的 attr 属性所在的元素都选出来。$ 表示结尾，这一点和正则表达式中的表述语义是类似的。一个可能的例子是：在 Ant Design 中，Icon 组件会根据当前网页的语言，显示 aria-label="icon: right" 或 aria-label="图标: right"。如果要根据当前选择的语言去分别创建选择器，会有一些麻烦，这时候可以考虑直接使用 [aria-label$=right] 来进行选择。
attr*=keyword
这个选择器可以将所有 attr 中带有 keyword 字段的元素都选出来。暂时没有遇到什么实际的应用场景，但是可以考虑用作属性的文案检查器。比如，原先的产品名字叫 AAA，但是后期业务调整，名字改成了 BBB，那么下面的 CSS 就可以将所有还没有改过来的元素都标注出来：
[class*=AAA], [aria-label*=AAA] {
color: red;
}