为什么在一个元素中在不同的时间内进行颜色过渡<div>？

Question

第一个里面有段落，第二个(内部)也有段落。

两个段落都有蓝色文本，当鼠标悬停在第一个(悬停)位置时，颜色变为红色。颜色转换为动画。

我的问题是这两段的颜色不会同时改变。第二个在第一个之后变成红色。我需要同时过渡。

为了避免出现问题，我必须把第二段从内移到第一段。或者从CSS中删除星号*(下面的示例代码)。

在我的真实案例中，情况更为复杂，我无法从内部移动段落。从CSS中删除星号没有任何变化。

问题在Chrome上比FireFox更明显。

我不能展示真实的例子，所以下面是一个简单的例子。但这表明了我对延迟第二段过渡的问题。

.first_div {color: #00f }
.first_div:hover { color: #f00 }
.first_div * { transition: color 800ms linear }

<div class="first_div">
<p>first</p>
<div>
<p>second</p>
</div>
</div>

您可以在上测试代码https://jsfiddle.net/xwzt4pyL/2/

如何设置段落并行转换的动画？

Answer 1

改为

将转换放在第一个div上，不需要将第一个div中的所有内容作为目标，因为转换将应用其中的所有内容，并且它将同时应用它，而不是将转换排队

.first_div {
color: #00f;
transition: color 800ms linear;
}
.first_div:hover {
color: #f00;
}

<div class="first_div">
<p>first</p>
<div>
<p>second</p>
</div>
</div>