[英]Different behaviour between ":last-child" and ":not(:last-child)"
I have the following html code:我有以下 html 代码:
<nav>
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</nav>
Using:使用:
nav :last-child {
text-transform: uppercase;
}
Result is:结果是:
Using:使用:
nav li:last-child {
text-transform: uppercase;
}
Result is:结果是:
While using:使用时:
nav :not(:last-child) {
text-transform: uppercase;
}
Result is:结果是:
Why ":not(:last-child)" doesn't need "li" to target the last child?为什么 ":not(:last-child)" 不需要 "li" 来定位最后一个孩子? Thanks.谢谢。
nav :last-child
includes your single <ul>
element. nav :last-child
包含您的单个<ul>
元素。 Since there is only one, it is a :last-child
.因为只有一个,所以它是一个:last-child
。 So it applies text-transform: uppercase;
所以它应用text-transform: uppercase;
to all if its contents, in this case, all three <li>
elements.全部,如果它的内容,在这种情况下,所有三个<li>
元素。 It is also being applied to the last <li>
, because it is also a :last-child
.它也被应用于最后一个<li>
,因为它也是一个:last-child
。 To see this more clearly, here is an example with two <ul>
elements.为了更清楚地看到这一点,这里有一个带有两个<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
is specific to only li
's, so it only styles the last <li>
. 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>
And finally, nav :not(:last-child)
applies to anything that is :not a last-child.最后, nav :not(:last-child)
适用于任何:not a 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>
nav :not(:last-child)
basically it means "everthing after nav but not last child". nav :not(:last-child)
基本上它的意思是“nav 之后的一切,但不是最后一个孩子”。 Example below:下面的例子:
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>
This is because the selector nav :last-child
doesn't select the last child of any particular nav
element , it selects any descendent of a nav
element which is also the last child among its siblings (the last child of its parent).这是因为选择nav :last-child
没有选择任何特定的最后一个子nav
元素,它选择的任何后代nav
,这也是它的兄弟姐妹中的最后一个孩子(其父的最后一个子)元素。
So given the elements所以给定元素
<nav>
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
</nav>
the css: css:
nav :last-child {
text-transform: uppercase;
}
will select both the ul
and the last li
because they are both the last child of their parents.将选择两个ul
最后li
,因为他们是父母双方的最后一个孩子。
With the same markup, but with the css使用相同的标记,但使用 css
nav :not(:last-child) {
text-transform: uppercase;
}
the ul
will not be selected because it is the last child of its parent. ul
不会被选中,因为它是其父级的最后一个子级。 However, the first 2 li
elements will be selected because they are not the last child of their parent (among their direct siblings).但是,前 2 个li
元素将被选中,因为它们不是其父级(在其直接兄弟级中)的最后一个子级。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.