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>