[CSS]属性选择器

2021/9/14 6:06:32

本文主要是介绍[CSS]属性选择器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前言

一次性选择多个元素进行CSS样式的书写,最普通的方式就是为它们添加一个相同的类名,然后以这个类名书写共同的样式。

但是有一个更加简单且灵活的选择器可以代替上述方式,即属性选择器。属性选择器的匹配规则类似于正则表达式,它可以匹配一个元素的属性,或者属性的值。

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

上面一些 div 元素的 class 属性的值拥有部分相同的字符 row-(或 row),利用属性选择器,然后对这些元素进行 CSS 样式书写:

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>

我们只选择了包含了有 style 属性的 div 元素,样式只对这类元素有效,对第三个 div 元素是没有影响的,所以最终只有第一个和第二个 div 元素的字体发生了变化。

匹配属性值

[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] 对于属性拥有多个值,但不一定匹配第一个属性值,可能是匹配到第二个及以后的属性值,其他形式的属性选择器无法生效,比如,class="a b c d e"

<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^='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]属性选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程