属性选择器（Attribute Selector）
学思创
332
属性选择器（Attribute Selector）用于选择具有特定属性及属性值的HTML元素，并为其添加样式。
属性选择器可以根据元素的属性名称和属性值来选择元素，从而实现更具体的选择。
以下是属性选择器的几种形式：
-
属性存在选择器：[att]使用方括号[]来选择具有指定属性的元素。例如，[class]将选择所有具有class属性的元素。
-
属性值选择器：[att=val]可以通过使用方括号和等号来指定属性的值。例如，[class="text-red"]将选择所有class属性值为text-red的元素。
- 属性包含指定词的选择器：[att~=val]使用~=选择器，可以选择具有以空格分隔的属性值中包含指定词的元素。这种属性选择器的形式可用于选择特定属性中包含指定词的元素，并为它们应用特定的样式。
-
子串匹配选择器：使用方括号和*、$、^字符来选择具有包含指定属性值的元素。例如，[att*=val]：[title*="xsc"]将选择所有title属性值中包含xsc的元素；[att^=val]：[title^="xsc"]将选择具有title属性值以xsc开头的元素；[att$=val]：[title$="xsc"]将选择具有src属性值以xsc结尾的元素
- 属性和值是由连字符分隔的选择器：[att|=val]使用|选择器，可以选择具有指定属性及以该属性值开头并通过连字符分隔的元素。
属性选择器可以用于选择具有特定属性及属性值的元素，并为它们设置样式。这样可以根据元素的属性来精确地选择并样式化。
以下是属性选择器的示例：
/* 存在属性的选择器 */
[a] {
color: blue;
}
/* 属性值等于给定值的选择器 */
[href="https://xsc.sxcrun.com"] {
color: red;
}
/* 属性包含指定词的选择器 */
[class~="active"] {
color: blue;
}
[data-tags~="red"] {
background-color: red;
}
/* 属性和值是由连字符分隔的选择器 */
[lang|="en"] {
color: blue;
}
[hreflang|="en"] {
color: red;
}
/* 属性值以给定值开头的选择器 */
[title^="xsc"] {
color: blue;
}
[href^="https://"] {
color: red;
}
/* 属性值以给定值结尾的选择器 */
[src$=".jpg"] {
border: 1px solid black;
}
[href$=".pdf"] {
color: red;
}
/* 属性值包含指定内容的选择器 */
[data-price*="49.99"] {
font-weight: bold;
}
[data-name*="John"] {
color: blue;
}在上述示例中，[a]选择器将选择具有a属性的元素，并将它们的文本颜色设置为蓝色。[href="https://xsc.sxcrun.com"]选择器将选择具有href属性值为https://xsc.sxcrun.com的元素，并将其文本颜色设置为红色。[class~="active"]选择器将选择具有class属性值中包含单独的单词active的元素，并将它们的文本颜色设置为蓝色。[data-tags~="red"]选择器将选择具有data-tags属性值中包含单独的单词red的元素，并将它们的背景颜色设置为红色。[lang|="en"]选择器将选择具有lang属性值以en开头并由连字符分隔的元素，将它们的文本颜色设置为蓝色。[hreflang|="en"]选择器将选择具有hreflang属性值以en开头并由连字符分隔的元素，将它们的文本颜色设置为红色。[title^="xsc"]选择器将选择具有title属性值以xsc开头的元素，并将它们的文本颜色设置为蓝色。[href^="https://"]选择器将选择具有href属性值以https://开头的元素，并将它们的文本颜色设置为红色。[src$=".jpg"]选择器将选择所有src属性以.jpg结尾的元素，并为它们添加一个黑色边框。[data-price*="49.99"]选择器将选择所有data-price属性值中包含49.99的元素，并将它们的字体加粗。
属性选择器在CSS中提供了更多灵活、精确的选择方式，可以根据元素的属性及属性值进行选择和样式化。