html - ":last-child"和 ":not(:last-child)"之间的不同行为

Question

我有以下 html 代码:

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

使用:

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

结果是:

• 文本1
• 文本2
• 文本3

使用:

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

结果是:

• 文本1
• 文本2
• 文本3

使用时:

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

结果是:

• 文本1
• 文本2
• 文本3

为什么“:not(:last-child)”不需要“li”来定位最后一个 child ？谢谢。

Answer 1

nav :last-child包括您的单曲<ul>元素。由于只有一个，因此它是 :last-child 。所以它适用text-transform: uppercase;到所有内容，在本例中，所有三个 <li>元素。它也应用于最后一个 <li> ，因为它也是 :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仅特定于li的，所以它仅设置最后一个 <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>