如何使CSS属性仅应用于指定的子元素？

嘿，这个需求我之前也碰到过！直接给.container加overflow: hidden的话，确实会影响它下面所有的子元素——因为父容器的overflow属性是用来处理自身整体内容溢出的，所有子元素都属于父容器的内容范畴。不过有几种简单的方法能实现你要的效果：

方法一：直接给目标子元素设置样式 #

这是最直接好维护的方案——既然你只想让.container__first有overflow: hidden，那就直接把这个属性加到它身上：

.container__first {
  overflow: hidden;
}

这样只会作用于第一个子元素，完全不会干扰.container__second，逻辑清晰又省心。

方法二：通过父容器精准定位目标子元素 #

如果因为某些场景（比如需要批量控制或动态选择），你想通过父容器来指定样式，也可以用CSS选择器精准定位：

方式1：通过类名直接选择 #

.container > .container__first {
  overflow: hidden;
}

这里的>是直接子元素选择器，确保只选中.container的直接子元素里的.container__first，不会误选嵌套在更深层级的元素。

方式2：通过位置选择器 #

如果你不确定子元素的类名，或者想按位置选择第一个子元素，可以用:nth-child(1)选择器：

.container > :nth-child(1) {
  overflow: hidden;
}

这个选择器会选中.container下的第一个直接子元素，不管它的类名是什么。

补充说明 #

要明确的是：父容器的overflow属性是作用于自身的，它会裁剪所有超出父容器范围的内容（包括所有子元素的溢出部分）。所以不存在“让父容器的overflow仅作用于某个子元素”的写法，正确的思路是给需要控制的子元素本身设置overflow属性。

内容的提问来源于stack exchange，提问作者frostzt