【前端初学者】【CSS笔记】属性选择器实例

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