CSS基础教程（三十八）属性 选择器：别再土憨憨地狂加Class了！CSS属性选择器：你的代码“瘦身”秘籍与“精准打击”神器

第一章：遇见选择器界的“瑞士军刀”

如果你还在为每一个需要样式的小元素都赋予一个独特的 class 而头疼，如果你曾看着密密麻麻的类名感到窒息，那么恭喜你，你找到了解药！CSS属性选择器（Attribute Selectors）就是来拯救你的。

它不像 class 或 id 选择器那样需要依赖额外的标记，而是直接考察HTML元素与生俱来的“属性”，并据此做出选择。想象一下，你不是通过名字（class）来找人，而是通过他的特征——“戴眼镜、穿红色衬衫、身高185cm”——来精准定位。这就是属性选择器的魅力所在，它让我们的CSS更加智能、语义化和高效。

第二章：七种武器——属性选择器语法全解析

属性选择器家族共有七位成员，它们各怀绝技。其核心语法是方括号 []。

1. [attr]：存在即真理

最基本的形式，它只关心目标属性是否存在，而不在乎它的值是什么。

示例：为所有有title属性的元素添加提示手型光标。

/* CSS */
[tittle] {
    cursor: help; /* 鼠标悬停时显示帮助问号 */
}

<!-- HTML -->
<p title="这是一段提示文本">悬停在我身上看看</p> <!-- 会生效 -->
<a href="#">一个普通的链接</a> <!-- 不会生效，因为没有title属性 -->

2. [attr=value]：精确匹配的强迫症患者

这是最严格的匹配，要求属性的值必须完全等于指定的value。

示例：精准定位类型为submit的按钮。

/* CSS */
input[type="submit"] {
    background-color: #4CAF50; /* 清新的绿色 */
    color: white;
    font-weight: bold;
}

<!-- HTML -->
<input type="text" placeholder="这里输入文字">
<input type="submit" value="提交"> <!-- 只有这个按钮会变绿 -->

3. [attr~=value]：空格分隔列表中的挚友

这个选择器用于属性值是一个用空格分隔的列表的场景。只要列表中的某一个值等于value，它就能匹