编辑“︁CSS属性选择器”︁（章节）

= CSS属性选择器 =

'''CSS属性选择器'''是一种强大的CSS选择器类型，允许开发者根据元素的属性及其值来匹配和选择HTML元素。它为样式化文档提供了更精细的控制，无需依赖类或ID即可定位特定元素。本指南将详细介绍属性选择器的语法、类型及实际应用。

== 简介 ==

属性选择器通过检查HTML元素的属性（如`href`、`src`、`data-*`等）来应用样式。其基本语法为`[attribute]`，表示选择所有具有该属性的元素。例如：
<syntaxhighlight lang="css">
[title] {
    color: blue;
}
</syntaxhighlight>
上述代码会为所有包含`title`属性的元素设置蓝色文本。

== 属性选择器的类型 ==

CSS属性选择器支持多种匹配模式，以下为常见类型：

=== 1. 存在性选择器（`[attribute]`） ===
匹配具有指定属性的元素，无论属性值为何。
<syntaxhighlight lang="css">
/* 选择所有带有disabled属性的按钮 */
button[disabled] {
    opacity: 0.5;
}
</syntaxhighlight>

=== 2. 精确匹配选择器（`[attribute="value"]`） ===
匹配属性值完全等于指定值的元素。
<syntaxhighlight lang="css">
/* 选择所有type为"submit"的input元素 */
input[type="submit"] {
    background-color: green;
}
</syntaxhighlight>

=== 3. 部分匹配选择器 ===
* '''`[attribute^="value"]`'''：匹配属性值以指定字符串开头的元素。
* '''`[attribute$="value"]`'''：匹配属性值以指定字符串结尾的元素。
* '''`[attribute*="value"]`'''：匹配属性值包含指定字符串的元素。

<syntaxhighlight lang="css">
/* 选择所有href以"https"开头的链接 */
a[href^="https"] {
    border-left: 3px solid gold;
}

/* 选择所有src以".png"结尾的图片 */
img[src$=".png"] {
    border: 2px dashed red;
}

/* 选择所有class包含"btn"的元素 */
[class*="btn"] {
    font-weight: bold;
}
</syntaxhighlight>

=== 4. 空格分隔匹配选择器（`[attribute~="value"]`） ===
匹配属性值包含独立单词（以空格分隔）的元素。
<syntaxhighlight lang="css">
/* 选择class包含"warning"单词的元素 */
[class~="warning"] {
    color: orange;
}
</syntaxhighlight>

=== 5. 连字符匹配选择器（`[attribute|="value"]`） ===
匹配属性值以指定字符串开头且后跟连字符（如`en-US`）的元素。
<syntaxhighlight lang="css">
/* 选择lang属性以"en"开头后跟连字符的元素 */
[lang|="en"] {
    font-family: Arial;
}
</syntaxhighlight>

== 实际应用案例 ==

=== 案例1：表单验证样式 ===
通过属性选择器为无效输入添加视觉反馈：
<syntaxhighlight lang="css">
input:invalid {
    border-color: red;
}

input[required]:invalid {
    background-color: #ffeeee;
}
</syntaxhighlight>

=== 案例2：图标字体控制 ===
根据`data-icon`属性动态显示图标：
<syntaxhighlight lang="html">
<span data-icon="home">Home</span>
</syntaxhighlight>
<syntaxhighlight lang="css">
[data-icon]::before {
    font-family: "Icon Font";
    content: attr(data-icon);
    margin-right: 0.5em;
}
</syntaxhighlight>

== 性能注意事项 ==

属性选择器的性能通常低于类或ID选择器，尤其在大型文档中。优化建议：
* 避免过度使用通用匹配（如`[class*="..."]`）。
* 尽量结合标签名限制范围（如`div[class^="box"]`）。

== 兼容性 ==

属性选择器在现代浏览器中支持良好，但旧版IE（如IE6）可能不支持部分语法。可通过工具如[[Can I use]]检查兼容性。

== 总结 ==

CSS属性选择器提供了灵活的样式控制方式，尤其适用于动态内容或无法直接修改HTML结构的场景。掌握其语法和适用场景能显著提升开发效率。

<mermaid>
graph TD
    A[属性选择器] --> B[存在性选择器 [attr]]
    A --> C[精确匹配 [attr="value"]]
    A --> D[部分匹配 [attr*="value"]]
    A --> E[开头/结尾匹配 [attr^="value"], [attr$="value"]]
    A --> F[单词匹配 [attr~="value"]]
    A --> G[连字符匹配 [attr|="value"]]
</mermaid>

== 参见 ==
* [[CSS选择器]]
* [[CSS伪类]]
* [[CSS特异性]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS选择器]]