如何仅对父元素应用样式而不影响子元素的样式？

Question

在这个例子中，我试图使父元素更透明，而不改变子元素的不透明度。

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

这是我当前的CSS样式：

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

有没有可能在CSS中实现这个效果？

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>