Question

我正在努力寻找能做两件事的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规则。所以，真正的问题是转换持续时间属性似乎是儿童的附加属性，看看当不再悬停在文本上时删除红色所需的速度有多慢，理想情况下每个嵌套元素的颜色应该同时转换

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>

Answer 1

通过使用*选择器并将.parent文本放在单独的div中，您可以选择父项的每个子项并应用转换以及颜色更改。

将.parent内容放在单独的div中会修复外转的延迟。

<强> CSS

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

.parent:hover * {
  color: red;
}

<强> HTML

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

使用此功能，也不需要!important。

＆＃13;

div {
  font-size: 3rem;
  text-indent: 1rem;
}
.child {
  color: blue;
}

.parent * {
  transition: all 2s ease-out;
}

.parent:hover * {
  color: red;
}

＆＃13;

<div class="parent">
  <div>Level 1</div>
  <div>
    Level 2
    <div class="child">
      Level 3
    </div>
  </div>
</div>

＆＃13;

<强> JSFiddle

Answer 2

通用选择器的性能已经显着提高，但它仍然是一个值得关注的问题，尽管是一个小问题。如果所有孩子都是.parent div，我建议您使用<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，例如蓝色.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的{{1}}属性未显式设置，因此它从其父级继承值;这就是为什么它一直保持红色直到其父级的<div>完成继承黑色，并开始转换为黑色，这会以递归方式创建延迟效果。

这就是为什么蓝色transition在鼠标徘徊时立即开始转换为蓝色的原因;因为它的<div>属性显式设置为color。

如何同时转换嵌套子项的颜色

2 个答案: