属性选择器是根据属性来选择元素,常用的有以下三种:包含属性选择器、属性值选择器、属性多值选择器
一、包含属性选择器
要选择包含hello属性的标签,只需要这样写:
[hello] {
/* 元素样式修饰... */
}
那么下面所有加了hello属性的标签都将被选中
<div hello>会被选中</div>
<span hello>会被选中</span>
<div>不会被选中</div>
二、属性值选择器
即属性的值相匹配时进行选择,假设选择flag=true的标签,如:
[flag=true]{
/* 样式修饰 */
}
那么所有flag=true的标签将被选中
<div flag="true">会被选中</div>
<span flag="true">会被选中</span>
<div flag="false">不会被选中</div>
<div>不会被选中</div>
三、属性多值选择器
属性可能含多个单词,但是只要有指定单词就选中,如下只要标签的content属性含hello单词就选中
[content~=hello] {
/* 样式修饰 */
}
如:
<div content="hello Jack">会被选中</div>
<span content="hello aaa">会被选中</span>
<div content="aaa bbb">不会被选中</div>
<div>不会被选中</div>