CSS属性选择器的区别

w3school给出的解释如下：
[attribute] | 用于选取带有指定属性的元素。
[attribute=value] | 用于选取带有指定属性和值的元素。
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] | 匹配属性值以指定值开头的每个元素。
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。
[attribute*=value] | 匹配属性值中包含指定值的每个元素。

不过这些官方的解释看着有点晕乎乎的，我还是比较喜欢用自己的方式去区分。具体代码不放在这里了，想看demo可以点击上面的选择器跳转到w3school。

1. 首先是 [attribute] 和 [attribute=value] ，这两个比较容易理解。前者匹配带有某个属性的元素；后者匹配某个属性为value的元素。

2. 其次是 [attribute~=value] 和 [attribute*=value]。这两个都是匹配属性中包含某个单词（value）的元素。区别是[attribute~=value]必须包含的是一个独立完整的单词，而[attribute*=value]只要属性中的字符串能解析出这个单词就可以。
   也就是说，符合[attribute~=value]的元素必定也符合[attribute*=value]。

image.png

例：
<li title="hello world fjornan">第一行</li>
<li title="hello_world_fjornan">第二行</li>
li[title ~="world"] 匹配到第一行
li[title *="world"] 匹配到第一行和第二行

3. 然后是 [attribute|=value] 和 [attribute^=value]。这两个都是匹配以某某单词开头的元素。区别是[attribute|=value]必须包含的是一个独立完整的单词，并且这个attribute的值只能是一个单词（或者用“-”连接的一个词串），而[attribute^=value]只要属性中的字符串能解析出这个单词就可以。
   也就是说，符合[attribute|=value]的元素必定也符合[attribute^=value]

   
   image.png

例：
<li title="hello-world-fjornan">第一行</li>
<li title="hello_world_fjornan">第二行</li>
li[title |="hello"] 匹配到第一行
li[title ^="hello"] 匹配到第一行和第二行

4. 最后是 [attribute$=value]，匹配以某某单词结尾的元素，不需要是一个完整的单词