详解:first-child/:nth-child用法，实现容器内首个div单独样式

一、伪类选择器工作原理 #

1. :first-child #

这个伪类匹配某个父元素下的第一个子元素，不限制子元素的标签类型，只要目标元素是其父元素的第一个子节点就会被选中。比如：

• 若父元素第一个子元素是<p>，p:first-child会选中该<p>；
• 若父元素第一个子元素不是<div>，div:first-child不会匹配任何元素。

2. :nth-child(n) #

这个伪类功能更灵活，匹配父元素下的第n个子元素，n可以是具体数字、关键词（odd对应奇数位，even对应偶数位）或公式（比如2n+1匹配所有奇数位元素）。同样不限制子元素标签类型，只看在父元素中的位置。比如：

• :nth-child(3)选中父元素的第三个子元素；
• :nth-child(even)选中父元素中所有偶数位置的子元素。

二、针对你的需求的解决方案 #

你当前的问题是选择器范围太广：.experience-container div:first-child会匹配.experience-container下所有后代中的div，且这些div是各自父元素的第一个子元素。看你的HTML结构，.experience-container的直接子div内部还有两个子div（title和summary），其中title是它父元素的第一个子元素，所以也会被该选择器命中，导致所有div都被设置了样式。

要仅选中.experience-container的直接子元素里的第一个div，需要用**子选择器>**限制范围，结合伪类实现：

方案1：使用:first-child #

.experience-container > div:first-child {
    width: 65%;
}

方案2：使用:nth-child(1) #

效果和方案1完全一致，写法不同：

.experience-container > div:nth-child(1) {
    width: 65%;
}

这里的>表示只匹配.experience-container的直接子元素，不会深入到后代元素中，因此只会选中class为h-100 d-flex flex-column gap-4的div，不会影响它内部的其他div。

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