CSS悬停不适用于子节点

Question

我的html设置与此类似，唯一的区别是我的'.inner被包裹得更深（例如。<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上，我的所有.inners都会获得边框。我的目标只是让第一个.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;
}