html - 仅使用css删除没有jquery的类或背景属性，这可能吗？

这是我的html：

<div class="class1 active">
  <div class="class2">
    <div class="class3"></div>
  </div>
</div>

我想做的就是这个。如果div 1有一个类active，我想用class3或它的background property删除div，但是我只想用CSS而不是jquery来做。可能吗？

最佳答案

您可以使用.class1.active和background:none

片段

.class3 {
  background: red;
  height: 100px; /* demo */
  width: 100px; /* demo */
  border: solid /* demo */
}
.class1.active .class3 {
  background: none
}

<div class="class1 active">
  <div class="class2">
    <div class="class3"></div>
  </div>
</div>

如果要完全删除.class3集display:none

片段

.class3 {
  background: red;
  height: 100px; /* demo */
  width: 100px; /* demo */
  border: solid /* demo */
}
.class1.active .class3 {
  display: none
}
.class4 {
  border: 1px solid red;
  height:100px;
  width:100px;
}

<div class="class1 active">
  <div class="class2">
    <div class="class3"></div>
    <div class="class4"></div>
  </div>
</div>

如果要保留空间但完全隐藏.class3，请使用visibility:hidden

片段

.class3 {
  background: red;
  height: 100px; /* demo */
  width: 100px; /* demo */
  border: solid /* demo */
}
.class1.active .class3 {
  visibility: hidden
}
.class4 {
  border: 1px solid red;
  height:100px;
  width:100px;
}

<div class="class1 active">
  <div class="class2">
    <div class="class3"></div>
    <div class="class4"></div>
  </div>
</div>