首页 > 代码库 > 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属性筛选易混淆选择器的区别