Различное поведение между ": last-child" и ": not (: last-child)" - PullRequest
Новая
       3

Различное поведение между ": last-child" и ": not (: last-child)"

6 голосов
/ 07 января 2020

У меня есть следующий html код: 

<nav>
  <ul>
    <li>Text1</li>
    <li>Text2</li>
    <li>Text3</li>
  </ul>
</nav>

Использование: 

nav :last-child {
   text-transform: uppercase;
}

Результат:

  • TEXT1
  • TEXT2
  • TEXT3

Использование: 

nav li:last-child {
   text-transform: uppercase;
}

Результат:

  • Text1
  • Text2
  • TEXT3

При использовании: 

nav :not(:last-child) {
   text-transform: uppercase;
}

Результат:

  • TEXT1
  • TEXT2
  • Text3

Почему ": not (: last-child)" не нуждается в "li" для нацеливания на последнего ребенка? Спасибо.

Ответы [ 3 ]

7 голосов
/ 07 января 2020

nav :last-child включает ваш единственный элемент <ul>. Поскольку есть только один, это :last-child. Таким образом, он применяется text-transform: uppercase; ко всем, если его содержимое, в данном случае, ко всем трем <li> элементам. также применяется к последнему <li>, потому что это также a :last-child. Чтобы увидеть это более четко, вот пример с двумя <ul> элементами. 

nav :last-child {
   text-transform: uppercase;
}
<nav>
  <ul>
    <li>This is not a last-child, and parent not a last-child</li>
    <li>This is not a last-child, and parent not a last-child</li>
    <li>Last-child of li in this section</li>
  </ul>
  <ul>
    <li>Parent ul of these li's is a last-child</li>
    <li>So all three li's</li>
    <li>Are uppercase</li>
  </ul>
</nav>

nav li:last-child задается c только для li, поэтому only стилирует последний <li>. 

nav li:last-child {
   text-transform: uppercase;
}
<nav>
  <ul>
    <li>Only applies to li's</li>
    <li>So ul has no style applied</li>
    <li>But this li is a :last-child</li>
  </ul>
  <ul>
    <li>Only applies to li's</li>
    <li>So ul has no style applied</li>
    <li>But this li is a :last-child</li>
  </ul>
</nav>

И, наконец, nav :not(:last-child) относится к всему , то есть : не последнему ребенку. 

nav :not(:last-child) {
   text-transform: uppercase;
}
<nav>
  <ul>
    <li>This ul is <b>not</b> a :last-child</li>
    <li>So all of its content</li>
    <li>will be uppercase</li>
  </ul>
  <ul>
    <li>This ul <b>is</b> a :last-child</li>
    <li>But these first two li's are not</li>
    <li>So they are uppercase</li>
  </ul>
</nav>
0 голосов
/ 07 января 2020

Это потому, что селектор nav :last-child не выбирает последний дочерний элемент какого-либо конкретного nav элемента , он выбирает любого потомка элемента nav, который является также последний ребенок среди своих братьев и сестер (последний ребенок своего родителя).

Итак, элементы 

<nav>
  <ul>
    <li>Text1</li>
    <li>Text2</li>
    <li>Text3</li>
  </ul>
</nav>

css: 

nav :last-child {
   text-transform: uppercase;
}

выберут как ul, так и последний li, потому что они оба последний ребенок своих родителей.

С той же разметкой, но с css

nav :not(:last-child) {
   text-transform: uppercase;
}

ul не будет быть выбранным, потому что является последним дочерним элементом его родителя. Однако первые 2 li элемента будут выбраны, поскольку они не являются последними дочерними элементами своих родителей (среди их прямых братьев и сестер).

0 голосов
/ 07 января 2020

nav :not(:last-child) в основном это означает «что угодно после nav, но не последний ребенок». Пример ниже: 

nav :not(:last-child) {
   text-transform: uppercase;
}
<nav>
  <ul>
    <li>Text1</li>
    <li>Text2</li>
    <li>Text3</li>
    <ul>
      <li>Text4</li>
      <li>This one is :not</li>
    </ul>
  </ul>
</nav>
...