<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
<style>
p:last-child
{
background:#ff0000;
}
</style>
屏幕快照 2019-04-11 上午9.38.29.png
最后一个p会被加上样式，前提是，p后面没有干扰元素，如果p后面有其他元素，div什么的，那么就会选不中了，所以last-child指的是p必须是某个父亲的最后一个孩子，
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<div>hahahhaah</div>
</body>
p:last-of-type
{
background:#ff0000;
}
div:last-of-type
{
background:yellow;
}
屏幕快照 2019-04-11 上午9.42.09.png
last-of-type就是指最后一个指定标签的最后一个
<body>
<p class="last">The first paragraph.</p>
<p class="last">The second paragraph.</p>
<p class="last">The third paragraph.</p>
<p class="last">The fourth paragraph.</p>
<div class="last">hahahhaah</div>
</body>
.last:last-of-type
{
background:#ff0000;
}
屏幕快照 2019-04-11 上午9.48.58.png
因为没有指定是p还是div所以是两个都选中了，但是如果是last-child的话，只能是最后一个div被加上类，如果写p.last:last-child则一个也选不中，因为p不是最后一个孩子
网友评论