CSS中:first-child无法选中首个p元素，问题出在哪里？

嘿，我来帮你排查这个问题！你遇到的情况其实是对:first-child选择器的工作机制理解有点偏差啦。

为什么原来的代码不生效？ #

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

看你的HTML结构：

<div>
  <h3>1 January 2018</h3>
  <h1>This is my first Article</h1>
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
</div>

div的第一个子元素是<h3>，而不是<p>。所以div p:first-child这个选择器找不到任何符合条件的元素——因为没有哪个<p>是它父元素（也就是div）的第一个子元素，自然边框样式就不会生效。

正确的解决方法 #

你有两个简单的方案可以实现需求：

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

这个选择器会选中父元素下第一个该类型的元素，不管前面有其他类型的标签。修改你的CSS为：

div p:first-of-type{ 
  border-left: 5px solid #bdc3c7; 
}

这样就能精准选中div里的第一个<p>标签，给它加上左侧边框。

方案2：使用相邻兄弟选择器（如果结构固定）

如果你的HTML结构里第一个<p>永远紧跟在<h1>后面，也可以用相邻兄弟选择器+：

div h1 + p{ 
  border-left: 5px solid #bdc3c7; 
}

这个选择器会选中div里紧跟在<h1>之后的第一个<p>元素，效果和方案1一致。

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