如何优雅设置父类与子类同名元素的样式？

1. SASS 预处理器方案（适合静态维护类名） #

如果你用 SASS，可以通过遍历类名列表自动生成样式规则，不用手动写重复的选择器：

// 维护这个类名列表，新增类名只需要加在这里
$target-classes: film music art;

@each $class in $target-classes {
  .#{$class} .#{$class} {
    color: red;
    // 其他需要设置的样式
  }
}

编译后会自动生成你之前写的冗长CSS规则，后续新增类名只需要在$target-classes里追加就行，比手动写高效很多。

2. JavaScript 动态方案（通用适配所有情况） #

如果需要完全通用，不管是静态还是动态添加的类名都能适配，可以用JS给符合条件的子元素加一个通用类，再写对应的CSS：

// 遍历所有带类名的元素
document.querySelectorAll('[class]').forEach(child => {
  const parent = child.parentElement;
  if (!parent) return;
  
  // 对比父子元素的类名，判断是否有重合
  const childClasses = new Set(child.classList);
  const parentClasses = new Set(parent.classList);
  
  const hasSameClass = [...childClasses].some(className => parentClasses.has(className));
  if (hasSameClass) {
    child.classList.add('same-class-as-parent');
  }
});

然后写CSS：

.same-class-as-parent {
  color: red;
  // 其他需要设置的样式
}

这个方案不需要提前知道类名，不管后续新增什么类，只要子元素和父元素有相同类名，就会自动应用样式。如果页面有动态添加的元素，记得在元素插入后重新执行这段JS。

3. 原生CSS 简洁写法（针对已知类名） #

如果不想用预处理器或JS，也可以用:is()伪类简化CSS规则，不用重复写逗号分隔的选择器：

:is(.film, .music, .art) :is(.film, .music, .art) {
  color: red;
}

虽然还是要列类名，但比原来的写法简洁不少，新增类名时只需要在:is()里追加即可。

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