属性选择器可根据元素的属性或属性值灵活选中目标；例如[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" 的输入框，比如用于文本输入的表单字段。
匹配属性值的一部分
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"，也能被正确选中。
基本上就这些常用方式。属性选择器不复杂但容易忽略，合理使用能减少额外的类名，让样式更智能。
