HTML 和 CSS，父选择器？

Question

所以我的问题是我想改变我的 <div>背景颜色和我的<h4>至red ，或者我将鼠标放在 <div> 中或<h4> .

这是我的 html(没有不必要的类)。

<div>
    <a href="#"><div><span class="icon-bubbles3"></span></div></a>
    <a href="#"><h4>News</h4></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

所以我一直在尝试申请h4:hover {color: red}然后我也想瞄准我的 <div>悬停时<h4> ，但是没有像“父选择器”这样的东西来定位我的div。那么我该怎么做呢？ (我不想用 <div> 标签包装 <h4> 和 <a>)。

谢谢!

Answer 1

首先，您需要在最外层 div 上有一个类，以便能够直接引用它，而无需引用“内部 div”:

<div class="mydiv">
    <a href="#"><div><span class="icon-bubbles3"></span></div></a>
    <a href="#"><h4>News</h4></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

然后你可以调用:

.mydiv:hover div {
   background-color:red;
}
.mydiv:hover h4 {
   color:red;
}