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

结果是：

• 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”来定位最后一个孩子？谢谢。

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，因此它

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)适用于

any]，即
：not

最后一个孩子。

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 to li's are not</li>
    <li>So they are uppercase</li>
  </ul>
</nav>

nav :not(:last-child)基本上是指“在导航之后的一切，但不是最后一个孩子”。以下示例：

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>

这是因为选择器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元素，因为它们是其父级的最后一个子级（在其直接同级中）。

Answer 2

Answer 3