如何选取<article>元素内的第一个<p>元素？（解决前置非<p>元素场景的选择器问题）

嘿，我懂你的困扰！你之前用的section article p:first-child和section article>p:first-child为啥不管用？因为first-child选择器的规则是目标元素必须是其父元素的第一个子元素，但在你的HTML里，<article>的第一个子元素是<header>，第二个是<img>，<p>根本排不到第一个，所以这俩选择器自然匹配不到任何元素。

给你两个靠谱的解决方案：

方案1：使用first-of-type选择器 #

这是最直接的方法，它会匹配父元素下同类型元素中的第一个，完全忽略前面的其他类型元素。对应的选择器是：

section article p:first-of-type {
  /* 这里写你的样式，比如： */
  font-weight: bold;
  color: #2c3e50;
}

在你的HTML结构里，这个选择器会精准命中<p>Etiam massa.</p>，也就是<article>里的第一个<p>元素，后面的<p>不会被选中。

方案2：使用nth-of-type(1)选择器 #

效果和first-of-type完全一样，只是写法更灵活（如果以后要选第N个<p>也能用）：

section article > p:nth-of-type(1) {
  /* 你的样式 */
}

小科普：first-child vs first-of-type的区别 #

• first-child：检查目标元素是否是父元素的第一个子元素（不管元素类型）
• first-of-type：检查目标元素是否是父元素下该类型元素的第一个（只看同类型）

举个简单例子：如果<article>里还有个<aside>在<p>前面，first-of-type依然能找到第一个<p>，但first-child还是不行。

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