[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] 的"子集"。