Html 如何同时转换嵌套子对象的颜色

我正在努力寻找CSS，它可以做两件事，改变所有子元素的颜色，并作为一种过渡。我已经创建了以下简单测试用例：

我想在父级指定一个规则，该规则将导致所有子级更改颜色。我知道如何使用

！重要提示

不鼓励使用，但这似乎是使用它的一个有效案例，因为此规则将该节标记为“错误”，应该覆盖其他规则

下面是我为使其工作所做的，但它要求我对设置颜色的所有子元素都有规则。在这个简单的例子中，这很好，但在实际系统中会出现问题，因为我们可能不知道改变颜色的所有规则

div{
字体大小：3rem；
文本缩进：1rem；
}
.孩子{
颜色：蓝色；
}
父母亲
.父母，孩子{
过渡：所有3s；
}
.父：悬停，
.parent:悬停.child{
颜色：红色！重要；
}

一级
二级
三级（！重要的意思是在悬停时它应该变成红色）

通过使用

*

选择器并将

.parent

文本放置在单独的div中，您可以选择父对象的每个子对象，并应用转换和颜色更改

将

.parent

内容放在一个单独的div中可以修复out转换的延迟

CSS

.parent * {
  transition: all 2s ease-out;
}

.parent:hover * {
  color: red;
}

HTML

<div class="parent">
  <div>Level 1</div> <!-- <-- Place in div -->
  <div>
    ...

一级
二级
三级

通用选择器的性能有了显著提高，但它仍然是一个问题，尽管只是一个小问题。我建议您使用

.parent div

，如果所有子项都是

s

CSS:

HTML:

一级
二级
三级
四级
五级

所以当有人在父元素上悬停时，您希望所有三个级别都改变颜色吗？我认为在转换过程中没有实际的延迟。但是你在蓝色元素上看到的延迟可能是因为它从蓝色过渡到红色。穿过中间颜色。这可能比CSS问题更直观。但是找不到引用。@AnkithAmtange当使用

*

选择器时，第二位文本（第一个div）在输出转换上运行的时间是原来的两倍。如果我错了，请纠正我。但是选择器要么匹配，要么不匹配。它们不应该导致过渡延迟。您所指的应该是起作用的

转换计时功能
ease out
@AnkithAmtange我认为发生的事情是嵌套元素都匹配CSS规则，但是每个匹配规则的转换持续时间是相加的。因此，我们看到Level2的颜色变化比level1的时间长（返回黑色时尤其明显）。谢谢，我很高兴删除该选项！重要规则。但是，您的更改会丢失div的嵌套，因此级别1是级别2的同级。如果有嵌套，我们仍然会得到转换的附加延迟，比如：@Josh，因为文本属于
.parent
本身，如果需要，您可以使用
或其他东西，而不是div。我用一个更好的示例修改了这个问题，显示了一个深度嵌套的结构。这表明嵌套越深，去除颜色所需的时间就越长。这是我不理解的部分，也就是说，为什么嵌套元素的转换会延迟？@Josh，谢谢你的更新。我来看看我能做些什么。观察第二层的过渡，当鼠标悬停结束时，我们会看到第二层保持红色的时间大约是第一层的两倍。所以，过渡时间似乎是累加的，这不是我的意图。@Josh你解决了这个问题吗？我也有同样的问题。与其他元素相比，我的内部文本更改颜色的时间更长。我尝试了许多CSS选择器的组合，但没有任何效果。我通过简单地为所有文本指定默认颜色来解决这个问题，这样它就不必等待其父级继承颜色（正如@5aledmage推测的那样）。所以我使用：{color:var（-body text color）；}这就解决了我的问题。
.parent * {
  transition: all 2s ease-out;
}

.parent:hover * {
  color: red;
}

<div class="parent">
  <div>Level 1</div> <!-- <-- Place in div -->
  <div>
    ...

div {
  font-size: 3rem;
  text-indent: 1rem;
}

.child {
  color: blue;
}

.parent,
.parent div {
  transition: all 3s;
}

.parent:hover,
.parent:hover div {
  color: red;
}

<div class="parent">
  Level 1
  <div>
    Level 2
    <div class="child">
      Level 3 (!important means this should become red on hover)
    </div>
  </div>
</div>