[attribute |= value] 与 [attribute ^= value]，[attribute ~= value] 与 [attribute *= value] 的联系与区别
[attribute |= value] 与 [attribute ^= value] 的联系与区别：
一、联系：
1. 两个选择器的 attribute 属性值等于 value 时都可以匹配
<div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> <div class="vue">vuevuevuevue.</div>
div[class^="test"]{ background:#ff0; } div[class|="vue"]{ background:#0f0; }
2. 两个选择器的 attribute 属性值以 value 开头且后面都跟上"-"时都可以匹配
<!-- html 中 class 名改变 --> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="test-test">The third div element.</div> <p class="test">This is some text in a paragraph.</p> <div class="vue-test">vuevuevuevue.</div>
/* css 不变 */ div[class^="test"]{ background:#ffff00; } div[class|="vue"]{ background:#00ff00; }
它们的结果不变：
二、区别：
1. 两个选择器的 attribute 属性值以 value 开头且后面都不跟上"-"，而是随意添上其它字母时，[attribute ^= value] 可以匹配，而 [attribute |= value] 不能匹配
<!-- html 中 class 名改变 --> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="testss">The third div element.</div> <p class="test">This is some text in a paragraph.</p> <div class="vuess">vuevuevuevue.</div>
/* css 不变 */ div[class^="test"]{ background:#ffff00; } div[class|="vue"]{ background:#00ff00; }
结果也改变：
其它情况下，比如后面添加 "_"等其它符号，和上面一样的结果。
总结：
1. [attribute ^= value] 可以同 attribute 值等于 value，或者 attribute 值以 value 开头后面跟任意字符的情况匹配；
2. [attribute |= value] 可以同 attribute 值等于 value，或者 attribute 值以 value 开头且后面只能紧跟 "-" 字符的情况匹配；
3. 可以说 [attribute |= value] 限定跟严格。只要 [attribute |= value] 能匹配到的情况，[attribute ^= value] 都能匹配到。[attribute |= value] 是 [attribute ^= value] 的"子集"。
[attribute ~= value] 与 [attribute *= value] 的联系与区别：
一、联系：
1. 两个选择器的 attribute 属性值等于 value 时都可以匹配
<div class="test">这是第一个 div 元素。</div> <div class="second">这是第二个 div 元素。</div> <p class="test">这是段落中的文本。</p>
div[class*="test"]{ background:#ff0; } p[class~="test"]{ background:#0ff; }
2. 两个选择器的 attribute 属性值包含一个 value 单词时都可以匹配
<!-- html 中 class 名改变 --> <div class="test ss">这是第一个 div 元素。</div> <div class="second">这是第二个 div 元素。</div> <p class="test ss">这是段落中的文本。</p>
/* css 不变 */ div[class*="test"]{ background:#ff0; } p[class~="test"]{ background:#0ff; }
结果也不变：
二、区别：
1. [attribute ~= value] 选择器的 attribute 属性值 value 后面跟上其它的字符时不能匹配；而[attribute *= value] 选择器的 attribute 属性值 value 后面跟上其它的字符时能匹配；
<!-- html 中 class 名改变 --> <div class="testss">这是第一个 div 元素。</div> <div class="second">这是第二个 div 元素。</div> <p class="testss">这是段落中的文本。</p>
/* css 不变 */ div[class*="test"]{ background:#ff0; } p[class~="test"]{ background:#0ff; }
结果改变：
2. 不仅如此，[attribute *= value] 选择器 attribute 的值 value 的在前面或后面添加任意字符都能匹配，只要有 value 这个字符串就行：
<div class="sstestss">这是第一个 div 元素。</div> <div class="second">这是第二个 div 元素。</div> <p class="testss">这是段落中的文本。</p>
div[class*="test"]{ background:#ff0; } p[class~="test"]{ background:#0ff; }
总结：
1. [attribute ~= value] 可以同 attribute 值等于 value，或者 attribute 值有 value 这个单词就能匹配；
2. [attribute *= value] 可以同 attribute 值等于 value，或者 attribute 值有 value 这个单词，或者在 attribute 值的前后添加任意字符，只要其中包含 value 这个字符串都能匹配；
3. 可以说 [attribute ~= value] 限定更严格。只要 [attribute ~= value] 能匹配到的情况，[attribute *= value] 都能匹配到。[attribute ~= value] 是 [attribute *= value] 的"子集"。
