Question

我有一个像这样的HTML代码

<div class="main-container">
   <div class="main">
     <div class="col-main">
        <div class="category-products">
           <div class="toolbar"> </div>
        </div>
     </div>
   </div>
</div>

我已尝试更改主容器背景，如果它有工具栏后代，我试过这样：

 .main-container > .main .col-main .category-products .toolbar{
  background-color: #f5f5f5;
  padding-top: 0;
}

.main-container >  .toolbar{
  background-color: #f5f5f5;
  padding-top: 0;
}

但没有任何作用

Answer 1

.main-container{
  background-color: #f5f5f5;
  padding-top: 0;
}

<div class="main-container">
   <div class="main">
     <div class="col-main">
        <div class="category-products">
           <div class="toolbar">CSS set background color</div>
        </div>
     </div>
   </div>
</div>

Answer 2

试试这个：

＆＃13;

.main-container[data-toolbaar="yes"] {
   background-color:#999;

＆＃13;

<div class="main-container" data-toolbaar="yes">
   <div class="main">
     <div class="col-main">
        <div class="category-products">
           <div class="toolbar"> HELLO</div>
        </div>
     </div>
   </div>
</div>

＆＃13;

说明

您可以传递自定义属性data-toolbar="yes"并使用css属性进行定位，并更改目标class或id属性。

Answer 3

首先，你不能用css向后遍历。所以你必须求助于javascript或找到其他方式。

但是，如果.main-container没有任何子项（或任何其他内容），您可以像这样设置样式：

＆＃13;

.main-container {
  height: 200px;
  background: tomato;
  margin-bottom: 1rem;
}

.main-container:not(:empty){
  background: blue;
}

＆＃13;

<div class="main-container" data-toolbaar="yes">
   <div class="main">
     <div class="col-main">
        <div class="category-products">
           <div class="toolbar"> HELLO</div>
        </div>
     </div>
   </div>
</div>

<!-- EMPTY -->
<div class="main-container" data-toolbaar="yes"></div>

＆＃13;

在css中选择祖父母

3 个答案: