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" >AAA</div>
<div class="row-2" >BBB</div>
<div class="row-3">CCC</div>
<style>
div[style] {
font-size: 40px;
}
</style>
匹配属性值
[attr=value]
[attr=value] 匹配属性值为 value 的元素。
<div class="row-1" >AAA</div>
<div class="row-2" >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" >AAA</div>
<div class="row-2 alias-2" >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" >AAA</div>
<div class="row-2 alias-2" >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" >AAA</div>
<div class="row-2 alias-2" >BBB</div>
<div class="row-3 alias-3">CCC</div>
<style>
css选择器分为哪几类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" >AAA</div>
<div class="alias-1" >BBB</div> <div class="type-1">CCC</div>
<style>
div[class*='-1'] {
font-size: 40px;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。