无法在css中选择第一个孩子

Question

这是我的代码

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

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

我希望第一段有一个左边框.根据这个MDN页面,这可以使用first-child但是由于某些原因我的工作不起作用.

它出什么问题了？

Answer 1

该:first-child选择器只选择它的父的第一个子类型无关.你<p>是其<div>父母的第三个孩子.要选择给定类型的第一个子节点,请使用:first-of-type:

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

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

编辑为了澄清如何:first-child工作,当你说div p:first-child,你没有选择p任何第一个孩子div.你还在选择任何一个孩子的第一个孩子div,但前提是那个孩子p.所以这是一种额外的限制.

在下面的示例中,我使用了青色背景:first-child.您可以看到它已应用于两个标题,即使它们具有不同的类型.然后我用了一个红色边框p:first-child.你可以看到,这次它只被应用到第二个标题,因为它是p,并且它不适用于第一个标题,因为它不是p(即它是h3):

div :first-child {
  background-color: #0ff;
}

div p:first-child {
  border: 1px solid #f00;
}

<div>
  <h3>This is my first Article</h3>
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
</div>
<div>
  <p>This is my second Article</p>
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
</div>