属性选择器
我们平常提到的属性选择器指的是[type="radio"]这类选择器，实际上，这是一种简称指的是“属性值匹配选择器”。实际上，在正式文档中，类选择器和ID 选择器都属于属性选择器因为本质上类选择器是 HTML 元素中 class 的属性值，ID 选择器是 HTML 素中 id 的属性值。
# ID选择器和类选择器
ID选择器和类选择器都属于属性选择器，因为几乎所有标签都支持id和class这两个属性，他们就有了专门的属性选择器。
ID 选择器和类选择器虽然性质一致，都属于属性选择器，但是它们的实际表现却有明显差异。
语法不同
ID选择器以
#开头，类选择器以.开头。优先级不同
ID选择器的优先级比类选择器的优先级高一个等级
唯一性与可重复性
ID 具有唯一性，而类天生就可以重复使用。
不同元素的类名是可以重复的，且类选择器可以控制所有元素。而ID在语义上是不能重复的，需保证其唯一性。
# 属性值直接匹配选择器
[attr][attr]表示只要包含指定的属性就匹配，尤其适用于一些 HTML 布尔属性，这些布尔属性只要有属性值，无论值的内容是什么，都认为这些属性的值是 true。<html> <input disabled> <input disabled=nm> <input disabled="disabled"> <input disabled="true"> <input disabled="false"> </html> <style> [disable] { } </style>1
2
3
4
5
6
7
8
9
10
11如上面的写法都是禁用输入框，直接使用属性选择器即可判断，无需关注具体的属性值。
[attr="val"][attr="val"]是属性值完全匹配选择器，例如：[type="radio"] {} [type="checkbox"] {} ol[type="a"] {} ol[type="i"] {}1
2
3
4提示
(1)不区分单引号和双引号，单引号和双引号都是合法的。
(2)引号是可以省略的。
[attr~="val"][attr~="val"]是属性值单词完全匹配选择器，专门用来匹配属性中的单词。匹配的属性值不能是空字符串，不能是部分字符串。
<a href rel="nofollow noopener">链接</a> <style> [rel~="noopener"] {} [rel~="nofollow"] {} </style>1
2
3
4
5[attr|="val"][attr|="val”]是属性值起始片段完全匹配选择器，表示具有attr属性的元素，其值要么正好是val，要么以val外加短横线-开头。
# 属性值正则匹配选择器
[attr^="val"][attr^="val"]表示匹配attr属性值以字符val开头的元素。<!-- 匹配 --> <div attr="val"></div> <!-- 不匹配 --> <div attr="text val"></div> <!-- 匹配 --> <div attr="value"></div> <!-- 匹配 --> <div attr="val-ue"></div>1
2
3
4
5
6
7
8实际开发中，开头正则匹配属性选择器用得比较多的地方是判断
<a>元素的链接地址类型,也可以用来显示对应的小图标。[attr$="val"][attr$="val"]表示匹配attr属性值以字符val结尾的元素。<!-- 匹配 --> <div attr="val"></div> <!-- 匹配 --> <div attr="text val"></div> <!-- 不匹配 --> <div attr="value"></div> <!-- 不匹配 --> <div attr="val-ue"></div>1
2
3
4
5
6
7
8在实际开发中，结尾正则匹配属性选择器用得比较多的地方是判断
<a>元素的链接的文件类型，然后是显示对应的小图标。[attr*="val"][attr*="val"]表示匹配attr属性值包含字符val的元素。<!-- 匹配 --> <div attr="val"></div> <!-- 匹配 --> <div attr="text val"></div> <!-- 匹配 --> <div attr="value"></div> <!-- 匹配 --> <div attr="val-ue"></div>1
2
3
4
5
6
7
8
我们可以借助属性选择器来辅助我们实现搜索过滤效果，如通讯录、城市列表，这样做性能高，代码少。
正则匹配运算符是属性选择器新增的运算符，它可以忽略属性值大小写,使用i作为运算符。
如选择器是[atty*="val" i]，则：
<!-- 匹配 -->
<div attr="VAL"></div>
<!-- 匹配 -->
<div attr="Text val"></div>
<!-- 匹配 -->
<div attr="Value"></div>
<!-- 匹配 -->
<div attr="Val-ue"></div>
2
3
4
5
6
7
8
