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;
}