• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

[CSS]属性选择器

开发技术 开发技术 1小时前 4次浏览

前言

类选择器选择多个元素的方式是为这些元素中再添加一个相同的类名。

<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>

[CSS]属性选择器

匹配属性值

[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>

[CSS]属性选择器

[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>

[CSS]属性选择器

[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>

[CSS]属性选择器

匹配属性值的子串

[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>

[CSS]属性选择器

[attr$=value]

[attr$=value] 与 [attr^=value] 的类似,前者匹配属性值包含以 value 结尾的子串的元素。

div[class^='ro'] {
    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>

[CSS]属性选择器


程序员灯塔
转载请注明原文链接:[CSS]属性选择器
喜欢 (0)