属性选择器是CSS中的一种选择器，用于通过HTML元素的属性来选择元素。属性选择器可以使用多种操作符来匹配不同的属性值。
以下是一些常见的属性选择器及其用法：
[attr]：选择拥有指定属性的元素。
例如，要选择所有带有“href”属性的链接元素，可以使用以下代码：
a[href] {
/* CSS rules */
}[attr=value]：选择指定属性等于指定值的元素。
例如，要选择所有链接到“https://www.example.com”的链接元素，可以使用以下代码：
a[href="https://www.example.com"] {
/* CSS rules */
}[attr~=value]：选择指定属性包含指定单词的元素。
例如，要选择所有带有class属性，其中包含单词“example”的元素，可以使用以下代码：
[class~="example"] {
/* CSS rules */
}[attr|=value]：选择指定属性以指定值开头的元素，或者以“-”分隔符开头的元素。
例如，要选择所有带有lang属性，其值以“en”开头的元素，可以使用以下代码：
[lang|="en"] {
/* CSS rules */
}[attr^=value]：选择指定属性以指定值开头的元素。
例如，要选择所有带有class属性，其值以“example”开头的元素，可以使用以下代码：
[class^="example"] {
/* CSS rules */
}[attr$=value]：选择指定属性以指定值结尾的元素。
例如，要选择所有带有class属性，其值以“example”结尾的元素，可以使用以下代码：
[class$="example"] {
/* CSS rules */
}[attr*=value]：选择指定属性包含指定值的元素。
例如，要选择所有带有class属性，其值包含“example”的元素，可以使用以下代码：
[class*="example"] {
/* CSS rules */
}下面是一个完整的例子，演示如何使用属性选择器来选择具有特定属性值的HTML元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Attribute Selectors Example</title>
<style>
/* Select all links with href attribute */
a[href] {
color: blue;
}
/* Select all links with href to www.example.com */
a[href="http://www.example.com"] {
color: red;
}
/* Select all elements with class containing "example" */
[class~="example"] {
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.example.com">Link to example.com</a>
<a href="http://www.google.com">Link to google.com</a>
<p class="example-1">Example paragraph 1</p>
<p class="example-2">Example paragraph 2</p>
</body>
</html>正文完