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

gg58donl  于 2023-10-21  发布在  其他
关注(0)|答案(4)|浏览(188)

有没有办法设置父背景颜色的基础上,子类使用css?
下面是我代码https://jsbin.com/bahodalila/edit?html,css,js,output,如果孩子有red类,父类应该将background-color设置为红色。2如果孩子有yellow类,父类应该将background-color设置为黄色。

  1. <div class="par">
  2. <div class="red">
  3. helli
  4. </div>
  5. </div>
  6. .par{
  7. background-color:red;
  8. }
  9. .par{
  10. background-color:yellow;
  11. }
  12. .par{
  13. width:200px;
  14. height:200px;
  15. border:1px solid blue;
  16. }
  17. .red{
  18. width:100px;
  19. height:100px;
  20. color:red;
  21. border:1px solid;
  22. background-color:green
  23. }

在这种情况下,我会使用javascript吗?有没有办法用css

ewm0tg9j

ewm0tg9j1#

伪元素可以模拟:

  1. .par {
  2. width: 200px;
  3. height: 200px;
  4. border: 1px solid blue;
  5. position:relative; /* here and not on child to make it relative to parent*/
  6. z-index:0;
  7. }
  8. .red {
  9. width: 100px;
  10. height: 100px;
  11. color: red;
  12. border: 1px solid;
  13. background-color: green;
  14. }
  15. .red::before {
  16. content:"";
  17. position:absolute;
  18. z-index:-1;
  19. top:0;
  20. left:0;
  21. right:0;
  22. bottom:0;
  23. background:inherit;
  24. }
  1. <div class="par">
  2. <div class="red">
  3. helli
  4. </div>
  5. </div>
  6. <div class="par">
  7. <div class="red" style="background:blue;">
  8. helli
  9. </div>
  10. </div>
展开查看全部
brvekthn

brvekthn2#

这可以使用**:has()CSS伪类**来完成

  1. .par:has(.red){
  2. background-color:red;
  3. }
  4. .par:has(.yellow){
  5. background-color:yellow;
  6. }

MDN link

**请注意,Firefox can I use不支持此功能

roejwanj

roejwanj3#

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

  1. .par{
  2. background-color:red;
  3. width:200px;
  4. height:200px;
  5. border:1px solid blue;
  6. }
  7. .par-yellow{
  8. background-color:yellow;
  9. width:150px;
  10. height:150px;
  11. border:1px solid;
  12. }
  13. .red{
  14. width:100px;
  15. height:100px;
  16. color:red;
  17. border:1px solid;
  18. background-color:green
  19. }
  1. <div class="par">
  2. <div class="par-yellow">
  3. <div class="red">
  4. helli
  5. </div>
  6. </div>
  7. </div>
展开查看全部
l2osamch

l2osamch4#

不幸的是,css上没有父selectors。一个解决方法是只与JS可能。你可以这样做:

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

相关问题