Javascript 有没有办法使用css在子类的基础上设置父类的背景色？

有没有办法使用css在子类的基础上设置父类的背景色

这是我的密码 如果孩子有

红色

班级家长应设置

背景色

红色。如果孩子有

黄色

班级家长应设置

背景色

黄色

<div class="par">
    
    <div class="red">
      helli
    </div>
  </div>



.par{
  background-color:red;
}

.par{
  background-color:yellow;
}
.par{
  width:200px;
  height:200px;
  border:1px solid blue;
  
}


.red{
  width:100px;
  height:100px;
  color:red;
  border:1px solid;
  background-color:green
}

helli
.标准杆{
背景色：红色；
}
.标准杆{
背景颜色：黄色；
}
.标准杆{
宽度：200px；
高度：200px；
边框：1px纯蓝色；
}
瑞德先生{
宽度：100px；
高度：100px；
颜色：红色；
边框：1px实心；
背景颜色：绿色
}

---

在这种情况下，我会使用

javascript

？是否有任何方法可以使用

css

？

css和DIV不使用父子方法。您需要在CSS中创建每个变量，并将每个DIV设置为所需的CSS变量。我用你的代码做了一个例子

.par{
背景色：红色；
宽度：200px；
高度：200px；
边框：1px纯蓝色；
}
.par黄色{
背景颜色：黄色；
宽度：150px；
高度：150像素；
边框：1px实心；
}
瑞德先生{
宽度：100px；
高度：100px；
颜色：红色；
边框：1px实心；
背景颜色：绿色
}

helli

不幸的是，css上没有父级。解决方法仅适用于JS。你可以这样做：

var redElements = document.querySelectorAll(".red");
for(var i = 0; i < redElements.length; i++){
  redElements[i].parentElement.style.backgroundColor = "red";
}

var redElements=document.queryselectoral（“.red”）；
对于（var i=0；i

伪元素可以模拟：

<代码> 宽度：200px； 高度：200px； 边框：1px纯蓝色； 位置：相对；/*此处而非子对象上，使其相对于父对象*/ z指数：0； } 瑞德先生{ 宽度：100px； 高度：100px； 颜色：红色； 边框：1px实心； 背景颜色：绿色； } 瑞德：以前{ 内容：“； 位置：绝对位置； z指数：-1； 排名：0； 左：0； 右：0； 底部：0； 背景：继承； }

helli
helli

这是否回答了您的问题？