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

Posted 2021-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无法在css中选择第一个孩子相关的知识，希望对你有一定的参考价值。

这是我的代码

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完成，但我的工作由于某种原因不起作用。

它出什么问题了？

答案

: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只选择父母第一个孩子的元素。你的<p>是你的<div>的第三个孩子，所以它不起作用。

尝试使用:first-of-type代替：

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

另一答案

你很接近，但<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>

另一答案

该段不是第一个孩子。

试试：

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

或者，是什么一样：

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

另一答案

您既可以使用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;
}

以上是关于无法在css中选择第一个孩子的主要内容，如果未能解决你的问题，请参考以下文章