将 CSS 不透明度应用于父级，而不是子级

Question

我有一个突出显示单词的句子：

我正在努力使其class="special"可见，其余部分class="sentence"出现在它周围。

几秒钟后，我触发了这个：

setTimeout(() => {
  document.getElementById("sentence-1").className += " fadeIn";
}, 2000)

.sentence {
  opacity: 0;
}
.special {
  opacity: 1;
}

.fadeIn{
  opacity: 1;
  transition: opacity 2s 2s;
}

<span id="sentence-1" class="sentence">This is the special <span id="special-1" class="special">word</span>, cool huh?</span>

在我看来，将不透明度设置.sentence为 0，将不透明度设置.special为 1，然后在触发 javascript 时淡入句子中...

取而代之的是，整个事情都淡化了，我不能一直都.special看得见。

---

编辑：如果有帮助，我可以访问父元素和子元素的 .class 或 #id ......

Answer 1

您将无法做到这一点，opacity因为您不能在透明元素中嵌套不透明元素。最终结果是完全透明。

您可以做的是使用rgba颜色值并转换Alpha通道。

例如

window.addEventListener('load', () =>
  document.querySelector(".sentence").classList.add("fadeIn"));

.sentence {
  color: rgba(0, 0, 0, 0);
  transition: color 2s 2s;
}
.special {
  color: #000;
}

.fadeIn {
  color: rgba(0, 0, 0, 1);
}

<span class="sentence">This is the special <span class="special">word</span>, cool huh?</span>

注意：我必须在window load事件中运行 JS以确保正确应用 CSS