CSS3 属性选择器

属性选择器，顾名思义是指通过属性选择符合条件的元素。
属性选择器可以单独使用，如通过 [title] 选中属性名为 title 的所有元素，也可以和标签选择器配合使用，如通过 p[title] 选中属性名为 title 的所有 p 元素。本文采用单独使用的方式说明属性选择器的作用。
参考内容为以下 CSS3 规范：
https://www.w3.org/TR/2018/REC-selectors-3-20181106/#selectors

1 [属性名]

选中所有包含指定属性名的元素。

2 [属性名][属性名]…

选中所有同时包含指定的多个属性名的元素。

3 [属性名=属性值]

选中所有包含指定属性名且对应的值为指定属性值的元素。
后面还会再次提到，在某个元素拥有属性 class=“demo demo1” 的情况下，通过 [class=demo] 或 [class=demo1] 都是无法选中该元素的。
属性值可以不带引号，也可以带单引号或双引号。
结合 2 [属性名][属性名] 和 3 [属性名=属性值]，以下任意组合方式都符合语法规范，不再截图说明。
(1)[属性名][属性名]
(2)[属性名][属性名=属性值]
(3)[属性名=属性值][属性名]
(4)[属性名=属性值][属性名=属性值]
…

4 [属性名^=字符串]

选中所有包含指定属性名且对应的值以指定字符串开头的元素。

5 [属性名$=字符串]

选中所有包含指定属性名且对应的值以指定字符串结尾的元素。

6 [属性名~=属性值]

选中所有包含指定属性名且对应的值中包含指定属性值的元素（即空格分隔开的多个值中的其中一个等于指定属性值）。
举个例子比较清楚。
通过 [class=“demo”] 是无法选中

的。[属性名=属性值] 要求属性名对应的值和指定属性值必须完全相同，而 [属性名~=属性值] 正好是一个很好的补充，它要求只要属性名对应的值中有一个值等于指定属性值就行（class 属性值可以设定多个）。
注意，[属性名~=属性值] 并不是匹配符合条件的字符串。如：[class~=dem] 并不能选中

。
所以 CSS3 规范中强调值必须是 whitespace-separated values，即空格分隔开的属性值。

7 [属性名*=字符串]

选中所有包含指定的属性名且对应的值包含指定字符串的元素。

8 [属性名|=字符串]

选中所有包含指定属性名且对应的值中包含指定字符串且后面紧跟着一个连字符 - 的元素。
这个匹配规则看起来有点奇怪。
按照 CSS3 规范的说法，它主要是用来处理网页语言匹配的。
以按钮为例，我们知道，开发网页时不同的按钮拥有一些共同的样式，同时又要给不同作用的按钮设定自己独特的样式。按照分组的原则，我们一般会给按钮设置多个 class 属性值，如： 和 ，把两个按钮共同拥有的样式写到 .btn {…} 中，再把他们单独拥有的样式分别写到 .btn1 {…} 和 .btn2 {…} 中。
网页语言与之类似。比如有两个 p 标签

hi

和

hi

，通过 [lang|=en] 可以同时选中这两个 p 标签。
这里需要注意的是：匹配的必须是连字符 - 前面的部分。即，上面的例子中无法通过 [lang|=us] 选中第二个元素。