求助：first-child选择器如何仅选中同类型的首个元素

嘿，这个问题我之前也踩过同样的坑！其实核心是你对:first-child的工作逻辑理解有点偏差，咱们一步步来理清楚：

为什么你的代码不生效？ #

:first-child选择器的规则是：选中某个元素，这个元素必须是它父元素的第一个子元素，同时还要匹配前面的选择器条件。

看你的HTML结构：

<div>
 <div></div>
 <article class="portfolio"></article>
 <article class="portfolio"></article>
 <article class="portfolio"></article>
</div>

父<div>的第一个子元素是那个空<div>，而不是<article>。所以你的article.portfolio:first-child相当于在找“既是父元素第一个子元素，又是带portfolio类的article”——显然不存在这样的元素，代码自然不会生效。

正确的解决方案 #

方案1：使用:first-of-type选择器（推荐） #

:first-of-type会忽略父元素下其他类型的子元素，只针对指定类型的元素筛选第一个。直接替换你的选择器即可：

article.portfolio:first-of-type {}

这个选择器会精准选中父元素下第一个<article>元素，同时它还带有portfolio类，完全符合你的需求，而且兼容性非常好，几乎所有现代浏览器都支持。

方案2：使用:nth-child()的of语法（进阶灵活版） #

如果你需要更精准的范围筛选（比如只在带portfolio类的<article>里选第一个），可以用CSS的:nth-child()扩展语法：

article.portfolio:nth-child(1 of article.portfolio) {}

这个语法会先把父元素下所有匹配article.portfolio的元素筛选出来，再从中选第一个。不过这个特性是较新的，需要注意浏览器兼容性（现代浏览器已支持）。

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