属性选择器可根据元素的属性或属性值灵活选中目标；例如[title]选含title属性的元素，[type="text"]精确匹配type为text的元素，[href*="example"]匹配href含example的链接，[class^="btn-"]匹配class以btn-开头的元素，[src$=".png"]匹配src以.png结尾的图片，[class~="highlight"]匹配class包含highlight单词的元素，提升样式规则的精准性与可维护性。

在CSS中，属性选择器可以根据元素是否包含某个属性，或属性值的具体内容来选中元素。这种方式非常灵活，尤其适合处理HTML中带有特定属性或属性值的标签。

基本属性选择器：根据是否存在某属性

最简单的属性选择器是选中具有指定属性的元素，不管属性值是什么。

例如，选中所有带有 title 属性的元素：

[title] {
  color: blue;
}

这段样式会让所有包含 title 属性的元素文字变为蓝色，比如

这个段落会被选中

。

精确匹配属性值

如果你想选中属性值完全等于某个字符串的元素，可以使用等号（=）。

[type="text"] {
  border: 1px solid gray;
}

这条规则会选中所有 type="text" 的输入框，比如用于文本输入的表单字段。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

匹配属性值的一部分

CSS还提供了一些更灵活的匹配方式，适用于属性值包含、开头、结尾等情况。

• [attr*="value"]：属性值中包含指定字符串（任意位置）
  例：[href*="example"] 匹配链接中含有 "example" 的 a 标签
• [attr^="value"]：属性值以指定字符串开头
  例：[class^="btn-"] 可匹配 class="btn-primary" 的按钮
• [attr$="value"]：属性值以指定字符串结尾
  例：[src$=".png"] 选中所有以 .png 结尾的图片

匹配空格分隔的单词（适用于class和lang）

使用波浪号（~）可以匹配属性值中以空格分隔的某个单词。

[class~="highlight"] {
  background: yellow;
}

这样即使元素有多个class，如 class="info highlight important"，也能被正确选中。

基本上就这些常用方式。属性选择器不复杂但容易忽略，合理使用能减少额外的类名，让样式更智能。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！