如何根据父元素选择器条件为多个子元素样式

Question

样式多个子元素

我在DOM中具有ID #parentDiv。该DIV具有2个元素<span>和一个<div>。

每当我在#parentDiv上徘徊时，我都想设置内部跨度和内部div标签。我如何以传统的CSS方式实现这一目标？

约束 - 这确实以传统的CSS方式完成。

Answer 1

而没有看到您的HTML代码，很难确切地知道什么将有效，但这应该：

#parentDiv:hover div {
}
#parentDiv:hover span {
}

这样，当DIV徘徊时，儿童跨度和DIV将在应用中添加的任何样式。

例如：

#parentDiv:hover div {
color: blue;
}
#parentDiv:hover span {
color: red;
}

<div id="parentDiv">
<div>Div Element</div>
<span> Span Element</span>
</div>

Answer 2

尝试以下语法：

PARENT_SELECTOR:hover CHILD_SELECTOR {
    /* your css goes here */
}

例如，

#parent:hover #child {
    background: yellow;
}