首页 > 代码库 > CSS属性筛选易混淆选择器的区别
CSS属性筛选易混淆选择器的区别
[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] 的"子集"。
CSS属性筛选易混淆选择器的区别