Question

使用CSS，如何通过类修改子元素，而不会影响具有相同类但父元素略有不同的另一个子元素。

例如，在我的示例中：

<div class="PQR">
    <div class="ABC>
      <div class = "XYZ"> </div>
    </div>

    <div class="DEF ABC">
      <div class = "XYZ"> </div>
    </div>
</div>

我的要求是我想在不影响其他XYZ的情况下将宽度减少50％而不影响其他XYZ

以下陈述影响两个部分，因为两个XYZ类的父类至少有一个为ABC。

.ABC .XYZ{width:50%}

我尝试了以下2个选项，但它们不起作用：

.ABC .XYZ:not(.DEF > .XYZ) {
  width: 50%
}

.ABC .XYZ:not(.DEF .XYZ) {
  width: 50%
}

Answer 1

.ABC:not(.DEF) .XYZ {
  width: 50%
}

Answer 2

你的html中有语法错误（错过了"），你可以选择ABC没有DEF。

＆＃13;

.XYZ {
  background-color: blue;
  height: 50px;
  color: #fff;
  text-align: center;
}
.ABC:not(.DEF) .XYZ {
  background-color: red;
}

＆＃13;

<div class="PQR">
  <div class="ABC">
    <div class="XYZ">Preant "ABC"</div>
  </div>

  <div class="DEF ABC">
    <div class="XYZ">Preant "DEF ABC"</div>
  </div>
</div>

＆＃13;

或者您可以使用第二个父

覆盖

＆＃13;

.XYZ {
  background-color: blue;
  height: 50px;
  color: #fff;
  text-align: center;
}
.DEF .XYZ {
  background-color: red;
}

＆＃13;

<div class="PQR">
  <div class="ABC">
    <div class="XYZ">Preant "ABC"</div>
  </div>

  <div class="DEF ABC">
    <div class="XYZ">Preant "DEF ABC"</div>
  </div>
</div>

＆＃13;

使用CSS，如何通过类修改子元素，而不会影响具有相同类但父元素略有不同的另一个子元素

2 个答案: