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有多个元素（不仅仅是spans），你可以这样做：

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

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

[编辑]

执行您在评论中要求的操作的唯一方法是将“Solid”文本包装在例如中<span>，如下面的代码片段所示。原因是该.half-faded > .solid规则将.solid元素的不透明度重新设置为 1，因此我们必须将元素外部文本的不透明度重新设置为.biz，0.3但是没有 CSS 规则来匹配文本节点，因此您需要有元素内的文本。

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

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

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

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

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

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