如何通过css属性包含选择器实现样式匹配

属性包含选择器通过方括号和操作符匹配元素，[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*=”google”]：匹配所有 href 中包含 google 的链接
• img[src*=”.png”]：选中 src 包含 .png 的图片

属性值前缀或后缀匹配

使用 ^= 匹配开头，$= 匹配结尾。

示例：

• a[href^=”https://”]：匹配以 https:// 开头的链接，常用于标记安全链接
• a[href$=”.pdf”]：匹配以 .pdf 结尾的链接，可用于添加文件图标

基本上就这些。属性包含选择器让CSS能更智能地响应HTML结构和内容特征，不复杂但容易忽略。合理使用可以减少额外的class依赖，提升维护效率。