css - CSS 中的 [x*="y"] 和 [x^="y"] 是什么意思？

Question

我想知道 * 和 ^ 在 css 中创建类的含义是什么？

例如：

[class*="sample-"]

和

[class^="sample-"]

Answer 1

*=意味着找到所有在类属性中存在文本“sample-”的元素。例如：

<style>
    [class*="sample-"] {}
</style>

<p class="asdsadsample-adas">Matches</p>
<p class="smple-">Doesn't match</p>

^=这意味着查找class 属性以文本 "sample-" 开头的所有元素。例如

<style>
    [class^="sample-"] {}
</style>

<p class="sample-blah">Matches</p>
<p class="ssample-blah">Doesn't match</p>