无法在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（即它是{{1} }）：

h3

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

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

Answer 2

:first-child仅选择父母第一个孩子的元素。您的<p>是<div>的第三个孩子，因此无效。

请尝试使用:first-of-type：

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

Answer 3

你已经离我很近，但<p>不是<div>的第一个孩子 - <h3>，所以 <p>不会选择first-child。

使用nth-child尝试：

div p:nth-child(3) {
  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>

Answer 4

该段落不是第一个孩子。

尝试：

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

或者，是什么相同：

div p:nth-of-type(1) { ... }

Answer 5

您可以使用div p:nth-child(3)，也可以使用div p:first-of-type的任何一种方式。

:first-of-type CSS伪类表示一组兄弟元素中其类型的第一个元素。

:nth-child() CSS伪类根据它们在一组兄弟姐妹中的位置匹配一个或多个元素。

:nth-child() here的文档。

:first-of-type here的文档。

使用:first-of-type使用：

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

或者使用:nth-child(3)使用：

div p:nth-child(3) {
  boder-left: 5px solid #bdc3c7;
}