将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

Answer 2

setTimeout(() => {
var x = document.getElementsByClassName('sentence');
var i;
for (i = 0; i < x.length; i++) 
{
   x[i].className += ' fadeIn'; // WITH space added
}
  

}, 2000)

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

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