我的 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 中实现吗?
最佳答案
使用 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;
}
关于html - CSS hover 不适用于子节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9366857/