我正在努力寻找可以完成两件事的 CSS，更改所有子元素的颜色，并将其作为过渡。我创建了以下 JSFiddle 的简单测试用例:
<div class="parent">Level 1
<div>Level 2
<div class="child">Level 3 (!important means this should become red on hover)
</div>
</div>
</div>
我正在尝试使用 CSS 将文本转换为不同的颜色。这是我正在使用的框架:
.parent {
transition: all 2s ease-out;
}
.parent:hover {
color: red !important;
}
.child {
color: blue;
}
我想在父级指定一个规则，使所有子级都改变颜色。我知道不鼓励使用 !important，但这似乎是使用它的有效案例，因为这条规则将部分标记为“错误”并且应该覆盖其他规则。
这是我为使其工作所做的工作，但它要求我对所有设置颜色的子元素都有规则。这在这个简单的例子中很好，但在实际系统中会出现问题，因为我们可能不知道所有改变颜色的规则。
div {
font-size: 3rem;
text-indent: 1rem;
}
.child {
color: blue;
}
.parent,
.parent .child {
transition: all 3s;
}
.parent:hover,
.parent:hover .child {
color: red !important;
}<div class="parent">
Level 1
<div>
Level 2
<div class="child">
Level 3 (!important means this should become red on hover)
</div>
</div>
</div>是否可以在不知道必须指定的所有类的情况下将所有子级转换为新颜色？我尝试使用 .parent * 选择器，但每一层嵌套都会增加过渡期，如 fiddle 所示。
更新
我对正在发生的事情有了更好的理解。 @Hunter 解决了不必要的 !important 规则。所以，真正的问题是 transition-duration 属性似乎对 child 来说是附加的，看看当不再悬停在文本上时移除红色需要多慢，理想情况下每个嵌套元素的颜色应该同时过渡.
div {
padding-left: 1rem;
}
.a-child { color: blue; }
.parent * {
transition: color 2s;
}
.parent:hover * {
color: red;
}<div class="parent">
<div>
Level 1
<div>
Level 2
<div>
Level 3
<div>
Level 4
<div class="a-child">
Level 5
</div>
</div>
</div>
</div>
</div>
</div>最佳答案
通用选择器的性能有了显着提高，但仍然是一个问题，尽管是次要问题。我建议你使用 .parent div , 如果所有 child 都是 <div>
CSS:
div {
font-size: 3rem;
text-indent: 1rem;
}
.child {
color: blue;
}
.parent,
.parent div {
transition: all 3s;
}
.parent:hover,
.parent:hover div {
color: red;
}
HTML:
<div class="parent">
Level 1
<div>
Level 2
<div class="child">
Level 3 (!important means this should become red on hover)
</div>
</div>
</div>
这是一个 JSFiddle .
编辑
为了避免递归传输延迟，只需设置 color黑人 child 明确地喜欢蓝色.a-child :
div {
padding-left: 1rem;
}
.parent * {
color: black; /* explicitly set color of children */
transition: color 2s;
}
.a-child { color: blue; }
.parent:hover * {
color: red;
}<div class="parent">
<div>
Level 1
<div>
Level 2
<div>
Level 3
<div>
Level 4
<div class="a-child">
Level 5
</div>
</div>
</div>
</div>
</div>
</div>递归延迟的原因是color在 transition 之前，父级的属性设置为红色然后完成，只有那时，color值返回到默认值(继承自 <body> 即黑色)。
color二级属性<div>未明确设置，因此它从其父级继承值；这就是为什么它在 transition 之前一直是红色的原因其父级的完成继承黑色，并开始过渡到黑色，这会递归地产生延迟效果。
这就是为什么蓝色 <div>当鼠标悬停时开始立即过渡到蓝色；因为它有它的 color属性明确设置为 blue .
关于html - 如何同时过渡嵌套子项的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39600138/