[attribute] 选择具有attribute属性的元素
[attribute="value"] 选择attribute属性值为value的元素
[attribute^="value"] 选择attribute属性值以value开头的元素
[attribute$="value"] 选择attribute属性值以value结尾的元素
[attribute*="value"] 选择attribute属性值包含value的元素
初始:
html文件内容:
<a href="https://www.baidu.com/" target="_blank" title="baidu">百度</a>
<a href="https://www.sina.com.cn/" target="_blank">新浪</a>
<a href="https://www.163.com/" target="_self">网易</a>
<a>空</a>
css文件内容:
a {
color: black;
text-decoration: none;
margin-left: 20px;
}
一、选择具有attribute属性的元素[attribute]
给所有具有 href 属性的元素设置红色字体
/* 选择具有href属性的元素 */
[href] {
color: red;
}
二、选择attribute属性值为value的元素[attribute="value"]
给所有 target 属性值为 _blank 的元素设置蓝色字体
/* 选中 target属性值为 _blank 的元素*/
[target="_blank"] {
color: blue;
}
三、选择attribute属性值以value开头的元素[attribute^="value"]
给所有 target 属性值以 _ 开头的元素设置紫色字体
/* 选中 target属性值以 _ 开头的元素*/
[target^="_"] {
color: purple;
}
四、选择attribute属性值以value结尾的元素[attribute$="value"]
给所有 target 属性值以 k 结尾的元素设置粉色字体
/* 选中 target属性值以 k 结尾的元素*/
[target$="k"] {
color: pink;
}
五、选择attribute属性值包含value的元素[attribute*="value"]
给所有 target 属性值包含 l 的元素设置绿色字体
/* 选中 target属性值包含 l 的元素*/
[target*="l"] {
color: green;
}
六、注意
属性选择框可以单独使用,也可以与其他选择器组合;
如果与其他选择器交集组合,属性选择器需要在后面。
例如:
<div class="div1" title="box">我是div</div>
<p title="para">我是p</p>
给 div1 的 title 属性值为 box 的元素设置红色字体
/* 选中 div1 中的 title 属性值为 box 的元素*/
.div1[title="box"] {
color: red;
}