html - div 中的不同不透明度元素

Question

我需要更改 div 中某个元素的不透明度，使其比父元素具有更高的不透明度。如何在没有预处理器的情况下为 .solid 提供完全不透明 (="1")？

.half-faded {
  opacity:0.3;
  border:1px solid black;
  width:200px;
  display:flex;
  justify-content:space-around;
}
.solid {
  opacity:1; /* doesn't help */
  opacity:2; /* twice doesn't help */
}

<div class="half-faded">
  <span class="one">One</span>
  <span class="two">Two</span>
  <span class="solid">Solid</span>
  <span class="four">Four</span>
</div>

Answer 1

如果.half-faded有多个元素(不仅仅是 span s)，你可以这样做:

.half-faded > * {
  opacity: .3;
}

.half-faded > .solid {
  opacity: 1;
}

[编辑]

完成您在评论中要求的唯一方法是将“Solid”文本包装在 <span> 中例如，如下面的代码片段所示。原因是 .half-faded > .solid规则改变了 .solid 的不透明度元素回到 1，所以我们必须调低 .biz 之外文本的不透明度元素返回 0.3 ，但是没有匹配文本节点的 CSS 规则，因此您需要将文本放在元素中。

如果您能够更改标记的构建方式，我认为更改标记的构建方式会更容易。

.half-faded > * {
  opacity: .3;
  display: block;
}

.half-faded > .solid {
  opacity: 1;
}

.half-faded > .solid > span {
  opacity: .3;
}

<div class="half-faded">
  <div>Not solid</div>
  <a class="solid">Solid</a>
  <span class="solid">
    <span>Inside solid but not solid</span>
    <a href="#" class="biz">Solid business</a>  
  </span>
</div>