CSS 属性选择器

属性选择器（Attribute Selectors）能根据元素的"属性及其取值"来挑选元素，比如选择所有带 title 属性的、或 href 以 https 开头的元素。它能减少对 class 的依赖，让样式写得更精准，是进阶 CSS 里非常实用的一课。

基本属性选择器 [attr]

只要元素带有该属性就命中，不管属性值是什么：

[title] { border-bottom: 1px dotted; }  /* 所有带 title 的元素 */
a[href] { color: blue; }                /* 所有带 href 的链接 */

<p title="提示文字">鼠标悬停会看到提示</p>
<a href="https://example.com">示例链接</a>

运行效果：带 title 的段落出现点状下划线，普通段落不受影响。

精确值匹配 [attr="value"]

属性值必须与给出的字符串完全相同：

input[type="text"] { border: 2px solid #4caf50; }      /* 文本输入框 */
input[type="submit"] { background: #4caf50; color: #fff; }
a[target="_blank"] { padding-right: 14px; }            /* 新窗口打开的链接 */

运行效果：文本框与提交按钮样式分开定制——按 type 区分同一类标签，比逐个加 class 省事得多。

模糊匹配的四种写法

CSS 提供多个"部分匹配"符号，让选择更灵活：

写法	含义	示例
[attr^="x"]	属性值以 x 开头	a[href^="https"] 安全链接
[attr$="x"]	属性值以 x 结尾	a[href$=".pdf"] PDF 链接
[attr*="x"]	属性值包含 x	[class*="icon"] 图标类
[attr~="x"]	空格分隔的多个词中含 x	[class~="btn"] 按钮类

a[href^="https"] { color: green; }             /* 加密链接标绿 */
a[href$=".pdf"]::after { content: " (PDF)"; }  /* PDF 链接加标注 */
[class*="card"] { border: 1px solid #ddd; }    /* 类名含 card 的元素 */

运行效果：https 与 http 链接颜色不同，下载链接自动标注 (PDF)，维护时无需手工挑选元素。

表单样式实战

表单里同一类 input 外观不同，属性选择器正是解药：

input[type="text"], input[type="email"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;        /* 两种输入框统一外观 */
}
input[type="text"]:focus,
input[type="email"]:focus {
  border-color: #4caf50;         /* 聚焦时变绿 */
}
input[disabled] {
  background: #eee;
  color: #999;                   /* 禁用态灰显 */
}

<input type="text" placeholder="用户名">
<input type="email" placeholder="邮箱">
<input type="submit" value="提交" disabled>

运行效果：文本与邮箱框宽度一致，聚焦时边框变绿，禁用的提交按钮呈灰色不可点击。

小结

属性选择器按属性的存在、精确值或部分匹配来选元素：^= 开头、$= 结尾、*= 包含、~= 词级匹配。用它区分同标签的不同角色（type、href、disabled），可以减少多余的 class，让 CSS 更接近"声明式"的优雅。