[attr ^= "value"]

类似正则的匹配开头,下面的例子中,class只要是"page"开头的都能选中

<style>
div[class ^= "page"] {
    ...
}
</style>

<div class="page">✅</div>
<div class="page-title">✅</div>
<div class="pageTitle">✅</div>

[attr |= "value"]

匹配{value}开头的单词,单词可以是整个单词或者由-分割的单词

下面的例子中,class只要是"page"或者"page-"开头的都能选中

<style>
div[class |= "page"] {
    ...
}
</style>

<div class="page">✅</div>
<div class="page-title">✅</div>
<div class="pageTitle">❌</div>
<div class="page_title">❌</div>
<div class="a-page-title">❌</div>

[attr ~= "value"]

类似|=,可以匹配整个单词或者由空格分割的单词

下面的例子中,class只要包含"page"或者由空格分割的"page"都能选中

<style>
div[class ^= "page"] {
    ...
}
</style>

<div class="page">✅</div>
<div class="page title">✅</div>
<div class="page_title">❌</div>
<div class="a page title">✅</div>