[CSS]屬性選擇器

shiramashiro發表於2021-09-14
CSS

前言

類選擇器選擇多個元素的方式是為這些元素中再新增一個相同的類名。

<div class="row-1 alias"></div>
<div class="row-2 alias"></div>
<div class="row-3 alias"></div>

屬性選擇器是選擇元素的屬性或屬性值。

<div class="row-1"></div>
<div class="row-2"></div>
<div class="row-3"></div>

屬性選擇器的語法是 元素名[屬性名] 或 元素名[屬性名(符號)="值"]。

div[class*="row-"] {}

屬性選擇器有不同種類的匹配規則，有隻匹配屬性的、匹配屬性值的、匹配屬性值的子串的。

匹配屬性

[attr]

[attr] 匹配包含該屬性的元素。

<div class="row-1" style="color: red">AAA</div>
<div class="row-2" style="color: green">BBB</div>
<div class="row-3">CCC</div>

<style>
    div[style] {
        font-size: 40px;
    }
</style>

匹配屬性值

[attr=value]

[attr=value] 匹配屬性值為 value 的元素。

<div class="row-1" style="color: red">AAA</div>
<div class="row-2" style="color: green">BBB</div>
<div class="row-3">CCC</div>

<style>
    div[class="row-1"] {
        font-size: 20px;
    }
</style>

[attr|=value]

[attr|=value] 匹配屬性值是 value- 或 value 形式的元素，比如，class="row-1" 或 class="row"。

<div class="row-1 alias-1" style="color: red">AAA</div>
<div class="row-2 alias-2" style="color: green">BBB</div>
<div class="row-3 alias-3">CCC</div>

<style>
    div[class|='row'] {
        font-size: 40px;
    }
</style>

[attr~=value]

對於屬性有多個值，匹配的是第二個及以後的屬性值，其他形式的屬性選擇器只能匹配到第一個屬性值，而 [attr~=value] 不僅可以匹配第一個屬性值，還可以匹配第二個及以後的屬性值。

<div class="row-1 alias-1" style="color: red">AAA</div>
<div class="row-2 alias-2" style="color: green">BBB</div>
<div class="row-3 alias-3">CCC</div>

<style>
    div[class~="alias-1"] {
        font-size: 40px;
    }
</style>

匹配屬性值的子串

[attr^=value]

[attr^=value] 匹配屬性值包含以 value 開頭的子串的元素。

<div class="row-1 alias-1" style="color: red">AAA</div>
<div class="row-2 alias-2" style="color: green">BBB</div>
<div class="row-3 alias-3">CCC</div>

<style>
    div[class^='ro'] {
        font-size: 40px;
    }
</style>

[attr$=value]

[attr$=value] 與 [attr^=value] 的類似，前者匹配屬性值包含以 value 結尾的子串的元素。

div[class$='-1'] {
    font-size: 40px;
}

效果與上圖一致。

[attr*=value]

[attr*=value] 匹配屬性值包含以 value 的子串的元素。

<div class="row-1" style="color: red">AAA</div>
<div class="alias-1" style="color: green">BBB</div>
<div class="type-1">CCC</div>

<style>
    div[class*='-1'] {
        font-size: 40px;
    }
</style>

相關文章