:first-child 不工作，除非父母是 <div>答案

【问题标题】：:first-child not working unless the parent is <div>:first-child 不工作，除非父母是 <div>
【发布时间】：2018-06-03 08:32:11
【问题描述】：

有人能解释一下这背后的理论吗？我有这个代码； https://jsfiddle.net/vikaskulkarni/cnLdwxza/1/

<html>

  <head>
    <meta charset="utf-8">
    <title>Articles</title>
    <style>
      .bodyCls {
        float: left;
      }

      .bodyCls article {
        width: 50%;
        float: left;
      }

      article:first-child {
        background-color: red;
      }

      article:nth-child(2) {
        background-color: yellow;
      }

      article:nth-child(3) {
        background-color: blue;
      }

      article:last-child {
        background-color: green;
      }

    </style>
  </head>

  <body class="bodyCls">
    <div>
      <article>First</article>
      <article>Second</article>
      <article>Third</article>
      <article>Fourth</article>
    </div>
  </body>

</html>

这很好用。但是，如果我在此链接中从正文中删除 DIV，则第一个子选择器不起作用， https://jsfiddle.net/vikaskulkarni/95gbpmf8/1/

<html>

  <head>
    <meta charset="utf-8">
    <title>Articles</title>
    <style>
      .bodyCls {
        float: left;
      }

      .bodyCls article {
        width: 50%;
        float: left;
      }

      article:first-child {
        background-color: red;
      }

      article:nth-child(2) {
        background-color: yellow;
      }

      article:nth-child(3) {
        background-color: blue;
      }

      article:last-child {
        background-color: green;
      }

    </style>
  </head>

  <body class="bodyCls">
      <article>First</article>
      <article>Second</article>
      <article>Third</article>
      <article>Fourth</article>
  </body>

</html>

我在网上搜索，发现在使用选择器时总是涉及到一个 DIV。所以我对这些选择器的工作方式有点困惑。

【问题讨论】：

标签： css css-selectors selector

【解决方案1】：

如果您检查 DOM，会发现浏览器在 <body> 标记内添加了另外 3 个元素。 :first-child 运算符仅在目标元素是 <article> 并且是其父元素的第一个子元素时才有效。情况并非如此，因为<first-child> 实际上是<meta> 标记。这就是删除 div 时逻辑失败的原因。

要使其在没有 <div> 的情况下工作，您可以将 CSS 样式更新为如下内容：

  article:nth-child(4) {
    background-color: red;
  }

  article:nth-child(5) {
    background-color: yellow;
  }

  article:nth-child(6) {
    background-color: blue;
  }

  article:nth-child(7) {
    background-color: green;
  }

我个人建议使用包装 <div>，因为它可以让您的 HTML 和相应的 CSS 井井有条。此外，浏览器添加的额外标签的顺序可能因不同的浏览器而异，因此不能保证上述设置适用于所有浏览器。使用<div> 可以保证这一点，因为您的<article> 标签将始终是包装div 的唯一子项。

【讨论】：

谢谢，那么问题是如何在没有 DIV 的情况下完成这项工作？
阿米尔，通过查看他的代码，您可以清楚地看到他的meta 和style 标签都在<head> 中，而不是<body>。
@coderHASH64codingHASH46code 检查更新的答案。
@SirExotic 是的，但是当由 DOM 呈现时，它们被添加到 body 标记内。检查屏幕截图。至少在 Chrome 上。正如我所提到的，这可能因浏览器而异。所以最好有一个包装div。
谢谢，我不知道。很高兴知道:)

【解决方案2】：

<body></body> 中的每个节点都是 body 的子节点，因此在您的 css 中，您不必在子类选择器前面加上 body 类

查看我的演示以了解这个想法

https://jsfiddle.net/95gbpmf8/3/

article {
    width: 50%;
    float: left;
  }
  article:first-child {
    background-color: red;
  }

  article:nth-child(2) {
    background-color: yellow;
  }

  article:nth-child(3) {
    background-color: blue;
  }

  article:last-child {
    background-color: green;
  }

浮动节点使其显示为“inline-block”，因此您的文章 Node 现在作为具有 inline-block 显示的 div。

【讨论】：

【解决方案3】：

文章是父 div 的子元素。 :first-child 选择器要求元素是其父元素中的第一个子元素。在这种情况下，它不是。如果去掉父级，子级就不再是那个 div 的子级，它们是 body 的子级，不能使用 :first-child 选择器。请注意，这对:last-child 的作用相同

【讨论】：

他们还是身体的孩子？
是的，他们仍然是 body 的孩子，所以我假设它会起作用
我也是这么想的，但是如果你去掉父级，其他文章仍然保持它们的背景色，只有最后一个孩子受到影响。那是他的问题。
是的，first-child 和 last-child 的功能与 nth-child 不同
@AamirKhan 是的，正如您在回答中发现的那样，该元素不再是正文中的第一个子元素。我的回答不值得你投反对票。