正在加载...

CSS 属性选择器

到目前为止，你靠标签名、class、id 和树形关系找元素。有时 HTML 自己已经说明真相：这个链接有 target，那个输入是 type="email"，地址以 https 开头。属性选择器就读这份真相——不必为每种情况再造一个 class。

什么是属性选择器？

属性选择器找出带有某个 HTML 属性的元素。你可以只查「是否存在」，也可以精确或部分比对取值。属性名写在方括号里：[attr]。

五个日常写法

用这几种，几乎能覆盖常见的属性选择需求。

📊 属性选择器运算符

写法 简单含义 示例
[attr] 有这个属性（任意值） a[target]
[attr="value"] 取值恰好是这个 input[type="email"]
[attr^="value"] 取值以此文本开头 a[href^="https"]
[attr$="value"] 取值以此文本结尾 a[href$=".pdf"]
[attr*="value"] 这个文本出现在取值的某处 a[href*="docs"]

只看是否存在 — [attr]

方括号里只写名字，意思是：「要有这个属性。」取值是什么无所谓。

存在 — 会打开新标签页的链接

css
CSS Code 
a[target] {
font-weight: 600;
}

什么时候有用？

HTML 里的可选标志：带 target 的链接，或带 data-state 的元素——哪怕你还没按取值过滤。

精确取值 — [attr="value"]

= 表示取值必须一字不差相同。取值通常加引号；更清楚也更稳妥。

精确值 — 邮箱输入框

css
CSS Code 
input[type="email"] {
border: 1px solid #0f766e;
}

新建 class，还是用 type？

如果 HTML 里已有 type="email"，就直接写进选择器。新建 class（例如 .email-field）适合：同一套外观还要套在没有该属性的元素上。

取值开头 — ^=

^= 表示属性值以此文本开头。对安全地址或共用前缀特别好用。

以…开头 — https 链接

css
CSS Code 
a[href^="https"] {
color: #0f766e;
}

取值结尾 — $=

$= 表示取值以此文本结尾。适合 href 或 src 里的文件扩展名。

以…结尾 — PDF 链接

css
CSS Code 
a[href$=".pdf"] {
font-style: italic;
}

取值里某处 — *=

*= 表示这段文本出现在取值的任意位置。很强，但容易过宽。若已知开头或结尾，通常 ^= 或 $= 更干净。

包含 — 地址里的 docs 路径

css
CSS Code 
a[href*="docs"] {
text-decoration: underline;
}

好习惯

  • 选择器里的取值加引号：type="email"
  • 页面较乱时加上标签名：input[type="search"] 比光秃秃的 [type="search"] 更好读
  • 拼写与大小写跟 HTML 一致
  • 别用属性替代每一个 class；当标记本身已带出事实时再用属性

自己试一试

  1. 三个链接：一个 https://…，一个以 .pdf 结尾，一个路径含 docs；再加 <input type="email"> 和 <input type="text">。
  2. 写上 a[href^="https"] { color: #0f766e; }——只有安全链接变色。
  3. a[href$=".pdf"] { font-style: italic; }——PDF 链接变斜体。
  4. input[type="email"] { border-color: #0f766e; }——只有邮箱框带上边框。
  5. 可选：再看 a[href*="docs"]；可能比严格前缀/后缀多命中一些链接。

常见错误

  • 明明加引号更清楚更稳妥，却写成不带引号的 [type=email]
  • 该用 ^= 却用了 *=——「包含」也会命中中间，多出的链接被点亮
  • 普通外观用 [class] 代替 .name
  • 忘记 = 要整个取值——type="text" 不等于 type="textbox"
  • 搞混属性名——hreflang 不是 href

小结

  • 属性选择器用 [ ] 针对 HTML 属性
  • 只有名字 = 存在；= = 精确值
  • ^= 开头，$= 结尾，*= 取值中任意位置
  • 选仍能表达意图的最窄运算符
  • 需要时把标签名也接到选择器上
  • 在真实的 href 与 type 上练习，然后刷新页面

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程