Html CSS悬停don'；t应用于子节点

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

aaa

）

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

使用：

将此选择器约束为

.inner

元素，这些元素是

.main

的直接子元素

SitePoint很好地解释了这一点：

如果您确定只想要第一个孩子（如果有两个或多个相邻的孩子），请同时使用

：first child

：

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

使用：

将此选择器约束为

.inner

元素，这些元素是

.main

的直接子元素

SitePoint很好地解释了这一点：

如果您确定只想要第一个孩子（如果有两个或多个相邻的孩子），请同时使用

：first child

：

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

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

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