有没有办法设置父背景颜色的基础上,子类使用css?
下面是我代码https://jsbin.com/bahodalila/edit?html,css,js,output,如果孩子有red
类,父类应该将background-color
设置为红色。2如果孩子有yellow
类,父类应该将background-color
设置为黄色。
<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
}
在这种情况下,我会使用javascript
吗?有没有办法用css
?
4条答案
按热度按时间ewm0tg9j1#
伪元素可以模拟:
brvekthn2#
这可以使用**:has()CSS伪类**来完成
MDN link
**请注意,Firefox can I use不支持此功能
roejwanj3#
CSS和DIV不使用父子方法。您需要在CSS中创建每个变量,并将每个DIV设置为您想要的CSS变量。我用你的代码做了一个例子来展示。
l2osamch4#
不幸的是,css上没有父selectors。一个解决方法是只与JS可能。你可以这样做: