属性包含选择器通过方括号和操作符匹配元素，[href]选含href的元素，[href="https://example.com"]精确匹配值，[class~="highlight"]匹配空格分隔的单词，[src*=".png"]匹配子串，[href^="https://"]匹配前缀，[href$=".pdf"]匹配后缀，可减少class依赖提升维护效率。
在CSS中，通过属性包含选择器可以匹配具有特定属性值的元素，尤其适用于根据属性值中的部分字符串进行样式控制。这类选择器使用方括号 [] 来声明，并结合不同的匹配操作符来实现灵活的样式匹配。
属性存在选择器
最基础的形式是选择具有某个属性的元素，不管其值是什么。
示例：- [href]：匹配所有带有 href 属性的元素，比如 a 标签
- img[alt]：匹配所有 img 元素中带有 alt 属性的项
属性值完全匹配
使用等号 = 可以精确匹配属性值。
示例：- a[href="https://example.com"]：只匹配 href 值为 https://example.com 的链接
- input[type="text"]：仅选中 type 为 text 的输入框
属性值包含关键词（空格分隔）
使用 ~= 可以匹配属性值中包含指定单词（以空格分隔）的元素。
立即学习“前端免费学习笔记（深入）”；
示例：
- div[class~="highlight"]：匹配 class 属性中包含 highlight 这个独立词的 div
- 适用于多类名场景，如 class="item highlight important"
属性值包含子串
使用 *= 可以匹配属性值中包含指定字符序列的元素，是最常用的“包含”匹配方式。
示例：属性值前缀或后缀匹配
使用 ^= 匹配开头，$= 匹配结尾。
示例：- a[href^="https://"]：匹配以 https:// 开头的链接，常用于标记安全链接
- a[href$=".pdf"]：匹配以 .pdf 结尾的链接，可用于添加文件图标
基本上就这些。属性包含选择器让CSS能更智能地响应HTML结构和内容特征，不复杂但容易忽略。合理使用可以减少额外的class依赖，提升维护效率。
