CSS 属性 选择器
CSS属性选择器
CSS属性选择器是一种选择器,它可以选择具有指定属性的HTML元素。也可以选取属性值以特定字符开头、结尾或包含特定字符的元素。如下是一些基本的CSS属性选择器。
选择包含特定属性的元素
以下选择器可以用来选择包含特定属性的元素。
[attribute]
[attribute]
这个选择器可以选取包含指定属性的HTML元素。例如,下面这个选择器可以选取以下代码中所有带有 “target"属性的元素:
<a href="https://www.baidu.com" target="_blank">百度网页</a>
CSS代码:
[target] {
color: red;
}
[attribute=value]
[attribute=value]
这个选择器可以选取指定属性和属性值的HTML元素。例如,下面这个选择器可以选取以下代码中所有带有 “target=_blank"的元素:
<a href="https://www.baidu.com" target="_blank">百度网页</a>
CSS代码:
[target="_blank"] {
color: red;
}
[attribute~=value]
[attribute~=value]
这个选择器可以选取属性值包含指定值的HTML元素。例如,下面这个选择器可以选取以下代码中所有带有 “class"属性,并且 “class"属性中包含 “red” 字符串的元素:
<p class="paragraph red">这是一个文本段落</p>
CSS代码:
[class~=red] {
color: red;
}
[attribute|=value]
[attribute|=value]
这个选择器可以选取属性值以指定值开头的HTML元素,该值必须是单词或开始的空格。例如,下面这个选择器可以选取以下代码中所有带有 “lang"属性,并且 “lang"属性值以 “zh” 开头的元素:
<div lang="zh-CN"></div>
CSS代码:
[lang|=zh] {
font-family: "Microsoft YaHei";
}
[attribute^=value]
[attribute^=value]
这个选择器可以选取属性值以指定值开头的HTML元素。例如,下面这个选择器可以选取以下代码中所有以 “https” 开头的链接:
<a href="https://www.baidu.com">百度</a>
CSS代码:
[href^=https] {
color: green;
}
[attribute$=value]
[attribute$=value]
选择器可以选择属性值以指定值结尾的HTML元素。例如,下面这个选择器可以选取以下代码中所有以 “.jpg” 结尾的图片:
<img src="image.jpg" alt="一个图片">
CSS代码:
[src$=.jpg] {
border: 1px solid gray;
}
[attribute*=value]
[attribute*=value]
选择器可以选择包含指定值的属性值的元素。例如,下面这个选择器可以选取以下HTML代码中所有带有 “href” 属性,并且带有 “baidu” 文本的链接:
<a href="https://www.baidu.com">百度</a>
CSS代码:
[href*=baidu] {
color: green;
}
总结
这些基本的CSS属性选择器可以帮助您选择符合特定条件的HTML元素。对于Web开发人员来说,理解这些选择器是非常重要的,因为它们使我们能够更精细地控制并修改HTML页面的样式。