[英]Behaviour of last-child
Why is the last p
not highlighted? 为什么最后一个p
没有突出显示?
w3schools says: w3schools说:
Specify a background color for the p element that is the last child of its parent 为p元素指定背景颜色,该元素是其父元素的最后一个子元素
So the last p
should be highlighted right? 那么最后一个p
应该突出显示吗?
<style>
div p:last-child {
background: #ff0000;
}
</style>
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<span>The first span.</span>
<div>
for you saying, use this - that is not my question: 对你说,用这个 - 这不是我的问题:
div p:last-of-type {...}
Last-child
is not selecting what you're expecting it to select (You need last-of-type
, instead). Last-child
没有选择你期望它选择的东西(你需要last-of-type
)。 The last-child
property only applies to elements that are the last child element of their parent container. last-child
属性仅适用于作为其父容器的最后一个子元素的元素。 In your case, span
is the last-child
: 在你的情况下, span
是last-child
:
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<span>The first span.</span> <!-- this <span> is the "last-child" -->
<div>
So the CSS selector p:last-child {}
doesn't have anything to select, because it's looking for the last child of a container that is also a <p>
element . 所以CSS选择器p:last-child {}
没有要选择的东西,因为它正在寻找容器的最后一个子元素 ,它也是一个 <p>
元素 。 Here is a more concrete, real-world analogy: 这是一个更具体,真实世界的类比:
You have three children: 你有三个孩子:
In markup, this looks like: 在标记中,这看起来像:
<mother>
<jack>17</jack>
<susan>14</susan>
<alex>10</alex>
</mother>
A blank :last-child {}
selector will select Alex, because he's the last child you had. 一个空白:last-child {}
选择器将选择Alex,因为他是你的最后一个孩子 。 However, you are trying to select the last child of a certain type, in this case we'll say their name
is the type. 但是,您正在尝试选择某个类型的最后一个子节点,在这种情况下,我们会说他们的name
是类型。 Susan:last-child
, then, won't work, because even though Susan is the last of your children to be named Susan (eg to have type name
of "Susan"), she's not the last child you've had. Susan:last-child
那么, Susan:last-child
将无法工作,因为即使Susan是你孩子的最后一个名字叫Susan (例如name
为“Susan”),她也不是你的最后一个孩子。
If you use last-of-type
instead, it will work, because the fourth p
is the last-of-type
p
. 如果使用last-of-type
,它将起作用,因为第四个p
是last-of-type
p
。
It's worth mentioning that W3Schools is an external resource. 值得一提的是,W3Schools是一种外部资源。 It isn't the official CSS documentation. 它不是官方的CSS文档。 The :last-child
pseudo-class is defined in the CSS Selectors specification here: http://www.w3.org/TR/css3-selectors/#last-child-pseudo . :last-child
伪类在CSS Selectors规范中定义: http : //www.w3.org/TR/css3-selectors/#last-child-pseudo 。 This specification states: 该规范规定:
The
:last-child
pseudo-class represents an element that is the last child of some other element.:last-child
伪类表示一个元素,它是某个其他元素的最后一个子元素。
:last-child
selects specifically the last child. :last-child
具体选择的最后一个孩子。 Here p:last-child
would apply styling to a p
element only if it is the last child. 这里p:last-child
只有在它是最后一个子元素时才会将样式应用于p
元素。 In your case, span
is the last child, not p
, therefore there's nothing for your selector to select. 在您的情况下, span
是最后一个子节点,而不是p
,因此您的选择器无法选择。
<div>
<p>Foo.</p>
<span>Bar.</span>
<div>
Here span
is the last child, not p
. 这里的span
是最后一个孩子,而不是p
。 p:last-child
would not select anything. p:last-child
不会选择任何东西。
<div>
<p>Foo.</p>
<span>Bar.</span>
<p>Baz.</p>
<div>
Here p
is the last child, so p:last-child
would select the last p
element (whose text here is "Baz.". 这里p
是最后一个子节点,所以p:last-child
将选择最后一个p
元素(其文本为“Baz。”)。
This behaviour is exactly why the :last-of-type
selector exists. 这种行为正是:last-of-type
选择器存在的原因。 :first-child
and :last-child
will always only look select the first or last child. :first-child
和:last-child
将始终只选择第一个或最后一个孩子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.