CSS 匹配 data-* 自定义属性

在 CSS 中，可通过属性选择器 [data-*="value"]精准匹配 data-* 自定义属性，以下是具体方法及语法示例：

1. 基础匹配：存在属性即可选中

使用 [attribute] 选择器，匹配所有带有指定 data-* 属性的元素：

/* 选中所有带 data-info 属性的元素 */
[data-info] {
  border: 1px solid red;
}

2. 精准匹配属性值

使用 [attribute=value] 选择器，匹配属性值与指定值完全相等的元素：

/* 选中 data-status="active" 的元素 */
[data-status="active"] {
  background-color: green;
}

3. 模糊匹配属性值

结合运算符实现灵活匹配：

• *=：属性值包含指定字符串：

  /* 选中 data-description 包含 "error" 的元素 */
  [data-description*="error"] {
    color: red;
  }
  

• ^=：属性值以指定字符串开头：

  /* 选中 data-id 以 "user-" 开头的元素 */
  [data-id^="user-"] {
    font-weight: bold;
  }
  

• $=：属性值以指定字符串结尾：

  /* 选中 data-file 以 ".pdf" 结尾的元素 */
  [data-file$=".pdf"] {
    background: url(pdf-icon.png);
  }
  

• ~=：属性值包含完整单词（以空格分隔）：

  /* 选中 data-tags 包含完整单词 "urgent" 的元素 */
  [data-tags~="urgent"] {
    border: 2px dashed orange;
  }
  

4. 结合伪类/伪元素

属性选择器可与伪类或伪元素组合，实现动态样式：

/* 选中被勾选且带 data-required 属性的复选框 */
input[type="checkbox"][data-required]:checked {
  accent-color: blue;
}

/* 在伪元素中显示 data-tooltip 的值 */
[data-tooltip]::after {
  content: attr(data-tooltip);
}

注意事项

• 大小写敏感：默认区分大小写，若需忽略大小写，可用 [attribute="value" i] 。
• 兼容性：现代浏览器均支持，但运算符（如 ~=、|=）需注意老旧浏览器兼容性。
• 性能：复杂选择器可能影响渲染性能，建议优先使用简单匹配。