Wie kann ich einen Stil nur auf das übergeordnete Element anwenden, ohne die Stile der untergeordneten Elemente zu beeinflussen?

Question

In diesem Beispiel versuche ich, das übergeordnete Element transparenter zu machen, ohne die Deckkraft der untergeordneten Elemente zu ändern.

<div>
<div className="larger-box">
  <div className = "smaller-box">
 </div>
</div>

Das ist mein aktueller CSS-Stil:

.larger-box{
  width: 10rem;
  height: 10rem;
  background-color: red;
}
.smaller-box{
  width: 2rem;
  height: 2rem;
  background-color: green;
  opacity: 1 !important;
}

Ist es möglich, diesen Effekt in CSS zu erzielen?

Answer 1

你可以使用CSS的not。

.larger-box:not(.smaller-box) {
  width: 10rem;
  height: 10rem;
  background-color: red;
}

.smaller-box {
  width: 2rem;
  height: 2rem;
  background-color: green;
}

Answer 2

孩子们总是会受到父母的不透明度的影响，所以给它们不同的不透明度的最简单方法是将它们设为兄弟元素，并将第二个元素绝对定位在第一个元素的上方，从而使每个元素都有自己的不透明度。请注意父包装div的position: relative。

在这里，我有一些文本显示在红色div的后面，绿色div位于其上方，就像它是一个子元素一样，但实际上它是一个兄弟元素，因此不受红色div的不透明度的影响。因此，文本透过红色div显示，但不透过绿色div显示。

.wrapper{
  width: 10rem;
 height: 10rem;
 position: relative;
}

p { padding: 8px}

 .larger-box{
   position: absolute;
  top: 0;
  left:0;
  width: 10rem;
  height: 10rem;
  background-color: red;
  opacity: 0.3
}
 .smaller-box{
  width: 2rem;
  height: 2rem;
  background-color: green;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrapper">
   <p>Lorem ipsum dolor sit amet. Sit dicta tempore id quas delectus estitier at voluptatem voluptas sit culpa iste ea voluptatum vero!</p>
  <div class="larger-box"></div>
  <div class = "smaller-box"></div>
</div>