#书摘 #css #前端
《CSS 选择器世界》属性值直接匹配选择器
属性值直接匹配选择器包括下面4种：


[attr]
[attr="val"]
[attr~="val"]

[attr|="val"]​​



这4种选择器的兼容性不错，IE8及以上版本的浏览器完全支持，IE7浏览器也支持，不过不完全，在极个别场景中有瑕疵。

1. [attr]
[attr] 表示只要包含指定的属性就匹配，尤其适用于一些HTML布尔属性，这些布尔属性只要有属性值，无论值的内容是什么，就认为这些属性值为 true。例如，下面所有的输入框的写法都是禁用的：


<input disabled>

<input disabled="">
<input disabled="disabled">

<input disabled="true">
<input disabled="false">​​



此时，如果想用属性选择器判断输入框是否禁用，可以直接使用下面的选择器，无须关心具体的属性值究竟是什么：


[disabled] {}​​



2. [attr="val"]
[attr="val"] 是属性值完全匹配选择器，例如：

[type="radio"] {}

[type="checkbox"] {}​​



(1) 不区分单引号和双引号，单引号和双引号都是合法的引号：

[type="radio"] {}



(2) 引号是可以省略的。例如：

[type=radio] {}

[type=checkbox] {}​​


如果属性值包含空格，则需要转义

3. [attr~="val"]
[attr~="val"] 是属性值单词完全匹配选择器，专门用来匹配属性中的单词，其中，`~=` 用来连接属性和属性值。
- 有些属性值（如class属性、rel属性或者一些自定义属性）包含多个关键词，这时可以使用空格分隔这些关键词，例如：

<a href rel="nofollow noopener">链接</a>​​



此时就可以借助该选择器实现匹配，例如：

[rel~="noopener"] {}
[rel~="nofollow"] {}​​


匹配的属性值不能是空字符串。

- 如果匹配的属性值只是部分字符串，那么也是无效的。例如，有选择器 `[attr~="val"]`，则下面两段HTML都不匹配：

<!-- 不匹配 -->

<div attr="value"></div>
<!-- 不匹配 -->
<div attr="val-ue"></div>​​




但是，如果字符串前后有一个或者连续多个空格分隔，则可以匹配：

<!-- 匹配 -->
<div attr=" val "></div>

<!-- 匹配 -->

<div attr="val ue"></div>​​



4. [attr|="val"]
[attr|="val"] 是属性值起始片段完全匹配选择器，表示对于具有attr属性的元素，**其值要么正好是val，要么以val加短横线-(U+002D)开头**，|=用于连接需要匹配的属性和属性内容。

<!-- 匹配 -->
<div attr="val"></div>
<!-- 匹配 -->
<div attr="val-ue"></div>
<!-- 匹配 -->

<div attr="val-ue bar"></div>

<!-- 不匹配 -->

<div attr="value"></div>
<!-- 不匹配 -->
<div attr="val bar"></div>
<!-- 不匹配 -->

<div attr="bar val-ue"></div>​​


可以看到，这个选择器严格遵循属性值起始片段匹配的规则。

https://memo.cosine.ren/m/325