仅使用css删除没有jquery的类或背景属性，是否可能？

Question

这是我的HTML：

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

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

Answer 1

您可以使用.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>

Answer 2

使用“display：none”完全隐藏div 3。

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

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