html - CSS hover 不适用于子节点

Question

我的 html 设置与此类似，唯一的区别是我的 '.inner's 包裹得更深(例如 <div><span><div class="inner">aaa</div></div></span> )

<div class="main">
    <div class="inner">aaa</div>
    <div class="main anOtherClass">
        <div class="inner">aaa</div>
    </div>
</div>

我的 CSS 是:

.main:hover .inner {
    border: 1px solid #000;
}

问题是，如果我将鼠标悬停在第一个 .main 上，我所有的 .inner 都会得到边框。我的目标只是让第一个 .inner 获得边界。这甚至可以在 css 中实现吗？

Answer 1

使用 child selector :

.main:hover > .inner {
    border: 1px solid #000;
}

将此选择器限制为 .inner 元素，这些元素是 .main 的直接子元素，

SitePoint 解释得很好:http://reference.sitepoint.com/css/childselector

如果你确定你只想要第一个(如果有两个或更多相邻的)也使用:first-child:

.main:hover > .inner:first-child {
    border: 1px solid #000;
}