如何为嵌套record元素设置独立reaction样式，避免样式继承？

问题背景 #

存在多层嵌套的.record元素，需求是：

• 当.record的data-reaction="1"时，其内部的.up元素显示绿色
• 当.record的data-reaction="-1"时，其内部的.down元素显示红色

但原CSS选择器会让父.record的样式穿透到子.record中，导致子.record里的.up继承父元素的绿色，使用:not(.record)的尝试未生效。

解决方案 #

核心思路是限制样式仅作用于当前.record直接子元素中不包含其他.record的分支，避免样式穿透到嵌套的子.record内部。具体步骤：

1. 先重置.up和.down的默认颜色，消除继承影响
2. 使用直接子元素选择器>结合:not(.record)，精准定位当前.record下的目标元素

修改后的完整CSS代码 #

* {
  font-weight: 700;
  font-size: 30px;
}

.record {
  padding-left: 20px;
}

.buttons {
  display: flex;
  gap: 20px;
}

/* 重置默认颜色，避免继承干扰 */
.up, .down {
  color: black;
}

/* 仅作用于当前record下，直接子元素非record的分支里的up */
.record[data-reaction="1"] > :not(.record) .up {
  color: green;
}

/* 仅作用于当前record下，直接子元素非record的分支里的down */
.record[data-reaction="-1"] > :not(.record) .down {
  color: red;
}

原理说明 #

• > 选择器确保只选中当前.record的直接子元素
• :not(.record) 排除了直接子元素是嵌套.record的情况，因此样式不会穿透到子.record内部
• 先重置.up和.down的颜色，彻底避免父元素的颜色继承干扰子元素的样式设置

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