CSS悬停不适用于子节点

Question

我的 html 设置与此类似，唯一的区别是我的 '.inner 包裹得更深（例如

aaa

)

<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 上，我的所有.inners得到边界。我的目标只是让第一个 .inner 获得边框。这甚至可以在CSS中做到吗？

Answer 1

使用子选择器：

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