通用CSS选择器：如何匹配含指定属性的当前任意元素

基础：匹配带指定属性的任意元素 #

不管标签类型（div/nav等），要匹配包含指定属性的元素，直接用属性选择器：

• 匹配所有带data-colorMode属性的元素：

  [data-colorMode] {
    /* 你的样式 */
  }
  

• 匹配属性值为特定值的元素（比如dark）：

  [data-colorMode="dark"] {
    /* 你的样式 */
  }
  

• 同时匹配多个属性的元素（比如同时有data-colorMode和data-theme）：

  [data-colorMode][data-theme="contrast"] {
    /* 同时满足两个属性的元素 */
  }
  

关键：限定在当前组件内生效 #

要让选择器只作用于当前组件的目标元素，不影响其他组件，有两种常用方式：

1. 基于组件根容器限定 #

给组件的最外层根元素加唯一标识（类名/自定义属性），把选择器嵌套在这个标识下：
假设组件根容器类名为profile-card，写法如下：

.profile-card [data-colorMode] {
    /* 仅当前组件内带data-colorMode属性的元素生效 */
}

如果用自定义属性标识根容器：

[data-component="sidebar"] [data-colorMode="dark"] {
    /* 仅sidebar组件内的深色模式元素生效 */
}

2. 用:scope伪类实现自动限定 #

现代浏览器支持的:scope伪类，代表当前样式的作用域根（比如Vue/React的scoped CSS里，:scope就是组件的根元素），直接用它来限定范围：

:scope [data-colorMode] {
    /* 自动仅当前组件内的目标元素生效 */
}

如果组件的根元素本身就是带data-colorMode的元素（比如你例子里的div/nav），直接写:scope就能匹配它：

:scope {
    background: var(--bg-color);
}

针对你给出的示例 #

假设第一个div是某个组件的根，在它的本地样式里写：

/* 匹配当前组件根（带data-colorMode="light"的div） */
:scope {
    background: #f5f5f5;
}

第二个nav是另一个组件的根，它的本地样式里写：

:scope {
    background: #2d2d2d;
}

这样两个组件的样式就不会互相干扰，各自生效。

内容的提问来源于stack exchange，提问作者danchez