如何编写通用CSS选择器匹配父元素与子元素类名相同的元素

解答 #

原生CSS目前暂不支持无需枚举的「父子元素同名类自动匹配」通用选择器，你可以根据技术栈选择以下更高效的实现方案： #

方案1：CSS预处理器自动生成规则

如果你使用Sass/SCSS这类预处理器，只需要定义一次类名列表，即可自动生成所有匹配规则，无需手动逐行枚举：

@each $className in one, two, three, four {
  .#{$className} > .#{$className} {
    color: red;
  }
}

编译后输出的CSS和你手动编写的枚举代码完全一致，类数量较多时可以大幅减少重复代码。 #

方案2：JS实现完全通用的无枚举匹配

如果希望完全不需要枚举，后续新增同名类也无需修改代码，可以用少量JS实现自动识别：

// 遍历所有元素，给父子类同名的子元素添加统一标识类
document.querySelectorAll('*').forEach(child => {
  const parent = child.parentElement;
  if (!parent) return;
  child.classList.forEach(cls => {
    if (parent.classList.contains(cls)) {
      child.classList.add('matched-same-class');
    }
  })
})

CSS只需要写一条针对标识类的规则即可：

.matched-same-class {
  color: red;
}

补充说明 #

CSS是静态样式描述语言，本身没有提供动态对比父子元素属性的逻辑能力，因此无法仅靠原生CSS实现完全无枚举的同名类匹配。

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