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

使用子选择器:

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