第一个孩子没有选择其类型中的第一个[重复]答案

【问题标题】：first-child not selecting the first of its type [duplicate]第一个孩子没有选择其类型中的第一个[重复]
【发布时间】：2018-11-08 19:08:25
【问题描述】：

嗨，

我遇到了第一个孩子选择器的问题。这是我的html代码

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

我想从列表中选择第一个article，所以我这样做了

article.portfolio:first-child {}

但它不会工作。只有当我删除它上面的div 时，它才会选择它。我以为first-child 会从父级div 中选择第一个ARTICLE，而是将其上方的div 计算为第一个子级。

我这样做第一个孩子选择只考虑文章而忽略所有其他元素类型是什么？

谢谢。

【问题讨论】：

你在找article:first-of-type { ... }
会选择其父级的第一篇文章还是整个文档的第一篇？
它将选择每个部分中的第一个 <article> 元素。如果需要，您可以使用article.portfolio:first-of-type。
有关first-of-type 与first-child 及其局限性的所有信息，请参阅此帖子：stackoverflow.com/questions/2717480/…
和stackoverflow.com/questions/24657555/…（链接到我对上述问题的回答）实际上特别关注这两个伪之间的区别。

【解决方案1】：

没有具有该类并且是第一个子元素的元素。如果您想要该类的第一个元素，请使用.portfolio:first-of-type。

【讨论】：