last-child【同理 first-child】
:last-child 表示其父元素的最后一个子元素,且这个元素是 css 指定的元素,才可以生效。
last-of-type【同理 first-of-type】
:last-of-type 表示其父元素的最后一个指定类型的元素
这两个区别就是 last-child 必须要多具备一个条件,就是必须是父元素的最后一个子元素,强调的是最后 child,而 last-of-type 只要符合最后一个 type 就可以。【例子 1 2】
弊端:对于元素选择伪类比较准确,但是对于类选择器选择伪类可能就会不太准确【例子 3 4】
现在看例子:
一、正常情况的没有干扰元素的 ul 下面全部都是 li
html
css
结果:两个都会对最后一个 li 生效。
last-child
last-of-type
二、ul 下面不止有 li,还有其他的元素,这个在实际场景中也是会出现的
html
css
结果:last-child 选不中目标元素,last-of-type 可以选择目标元素
last-child
last-of-type
三、选择某类的最后一项
html
css
][11]
结果:last-child 与 last-of-type 均不会选中某类的最后一项
.line:last-child 与.line:last-of-type
四、父元素下同类名不同元素选择最后一个类名
html
css
结果:last-child 选中既是最后一个子元素又是最后一个类名元素;last-of-type 会选择不同元素的最后一项子类
.line:last-child
.line:last-of-type