: первый ребенок не работает, если родитель не <div> - PullRequest
Новая
       25

: первый ребенок не работает, если родитель не <div>

0 голосов
/ 03 июня 2018

Может кто-нибудь объяснить теорию, стоящую за этим?У меня есть этот код;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.используя селектор.Поэтому я немного озадачен тем, как работают эти селекторы.

Ответы [ 3 ]

0 голосов
/ 03 июня 2018

Если вы проверяете свою DOM, оказывается, что дополнительные 3 элемента добавляются в тег <body> браузером.оператор :first-child будет работать, только если целевой элемент является <article> И первым дочерним элементом его родителя.Это не так, поскольку <first-child> на самом деле является тегом <meta>.Вот почему ваша логика не работает, когда вы удаляете div.

Description

Чтобы это работало без <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> всегда будут единственными дочерними элементами разделительного блока.

0 голосов
/ 03 июня 2018

каждый узел внутри <body></body> является дочерним элементом тела, поэтому в вашем css вам не нужно добавлять префикс селекторов дочернего класса к классу тела

см. Мою демонстрацию, чтобы понять идею

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;
  }

с плавающей точкой Node превращается в «inline-block», так что ваш Node статьи теперь как div с отображением inline-block.

0 голосов
/ 03 июня 2018

Статьи являются дочерними элементами родительского элемента div.Селектор :first-child требует, чтобы элемент был первым дочерним элементом в его родительском элементе.В этом случае это не так.Если вы удаляете родителя, дочерние элементы больше не являются дочерними элементами этого div, они являются дочерними элементами тела, и селектор :first-child использовать нельзя.Обратите внимание, что это работает так же для :last-child

...