css 自定义属性选择器

CSS 自定义属性选择器（CSS Custom Attribute Selectors）是新的 CSS 特性，它允许我们使用标准的选择器语法通过元素的属性值来选择目标元素。CSS 自定义属性选择器以中括号（[]）为语法标记，中括号内为属性选择器表达式，即属性名后紧跟“=”或“~=”等选择符的值。

/* 选择属性名为“data-id”的所有元素 */
[data-id] {
  /* CSS 样式 */
}

/* 选择属性名为“data-id”，且属性值为“123”的元素 */
[data-id="123"] {
  /* CSS 样式 */
}

/* 选择属性名为“class”，且属性值包含“active”的元素 */
[class~=active] {
  /* CSS 样式 */
}

使用 CSS 自定义属性选择器的好处在于可以针对元素的特定属性进行样式匹配和更精细的控制。例如，可以选择只有某个特定 data 属性的元素，或具有特定类的元素。

请注意，CSS 自定义属性选择器在 IE8 及以下版本的 Internet Explorer 浏览器中不受支持。可以使用 polyfill 库（如 selectivizr）来实现相似的功能。