Jos*_*osh 5 html css css-transitions
我正在努力寻找可以做两件事的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 class="parent">Level 1
<div>Level 2
<div class="child">Level 3 (!important means this should become red on hover)
</div>
</div>
</div>
.parent {
transition: all 2s ease-out;
}
.parent:hover {
color: red !important;
}
.child {
color: blue;
}
是否可以在不知道必须指定的所有类的情况下将所有子级转换为新颜色？我尝试使用.parent *选择器，但是每个级别的嵌套都会增加过渡期，就像这个小提琴一样
更新
我对发生的事情有了更好的了解。@Hunter 解决了不必要的!important规则。所以，真正的问题是，transition-duration属性似乎对孩子来说是附加的，看看当不再悬停在文本上时删除红色需要多慢，理想情况下每个嵌套元素的颜色应该同时过渡。
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 div如果所有孩子都是<div>s ，我建议您使用。
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明确设置黑色子代，例如蓝色.a-child：
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>
递归延迟的原因是，color父级的属性被设置为红色transition，直到完成，然后，color值才返回到默认值（继承自<body>黑色）。
color第二级的属性没有<div>显式设置，因此它继承了父级的值；这就是为什么它保持红色transition，直到其父级完成继承黑色并开始过渡到黑色，这种情况会递归地创建延迟效果。
<div>这就是为什么当鼠标悬停时蓝色立即开始转变为蓝色的原因；因为它的color属性明确设置为blue.
通过使用*选择器并将.parent文本放置在单独的 div 中，您可以选择父级的每个子级并应用过渡和颜色更改。
将内容放在.parent单独的 div 中可以修复输出转换的延迟。
CSS
.parent * {
transition: all 2s ease-out;
}
.parent:hover * {
color: red;
}
超文本标记语言
<div class="parent">
<div>Level 1</div> <!-- <-- Place in div -->
<div>
...
通过使用这个，也不需要!important.
.parent * {
transition: all 2s ease-out;
}
.parent:hover * {
color: red;
}
<div class="parent">
<div>Level 1</div> <!-- <-- Place in div -->
<div>
...