w3school給出的解釋如下：
[attribute] | 用于選取帶有指定屬性的元素管怠。
[attribute=value] | 用于選取帶有指定屬性和值的元素。
[attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。
[attribute|=value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] | 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] | 匹配屬性值以指定值結(jié)尾的每個元素宅倒。
[attribute*=value] | 匹配屬性值中包含指定值的每個元素。
不過這些官方的解釋看著有點(diǎn)暈乎乎的屯耸，我還是比較喜歡用自己的方式去區(qū)分拐迁。具體代碼不放在這里了蹭劈，想看demo可以點(diǎn)擊上面的選擇器跳轉(zhuǎn)到w3school。
首先是 [attribute] 和 [attribute=value] 唠亚，這兩個比較容易理解链方。前者匹配帶有某個屬性的元素；后者匹配某個屬性為value的元素灶搜。
其次是 [attribute~=value] 和 [attribute*=value]祟蚀。這兩個都是匹配屬性中包含某個單詞（value）的元素。區(qū)別是[attribute~=value]必須包含的是一個獨(dú)立完整的單詞割卖，而[attribute*=value]只要屬性中的字符串能解析出這個單詞就可以前酿。
也就是說，符合[attribute~=value]的元素必定也符合[attribute*=value]鹏溯。
例：
<li title="hello world fjornan">第一行</li>
<li title="hello_world_fjornan">第二行</li>
li[title ~="world"] 匹配到第一行
li[title *="world"] 匹配到第一行和第二行
-
然后是 [attribute|=value] 和 [attribute^=value]罢维。這兩個都是匹配以某某單詞開頭的元素。區(qū)別是[attribute|=value]必須包含的是一個獨(dú)立完整的單詞丙挽，并且這個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"] 匹配到第一行和第二行
- 最后是 [attribute$=value]平窘，匹配以某某單詞結(jié)尾的元素，不需要是一個完整的單詞
