html定位有多少种类型,html – 使用CSS定位一组元素类型中的最后一个元素

在这个例子中,有六个孩子,其中五个是p,h5中的任何一个.这五个中的最后一个元素是紧跟在span之前的p,因此它匹配上面的选择器. h1将匹配等效的：nth-​​child()表达式,而span将永远不会匹配给定selector-list的任何此类表达式 – 实际上,span本身可以表示为：not(p,h5).

while：nth-​​child(),：nth-​​last-child()和：not()都是在Selectors 3中引入的,select-list参数对Selectors 4来说是新的.但是还没有人实现它,也没有人知道什么时候会.不幸的是,没有使用当前可用的等价物,因为它基本上与this question相同,除了一个类选择器,你正在寻找匹配一个选项池的第n个(最后一个)子节点.在这两种情况下,您都要处理元素子元素的某个子集的第n次出现.

最好的办法是使用JavaScript,例如,在页面加载时将这些类添加到这些元素类型中的最后一个实例.使用原生DOM / Selectors API这样的东西：

var types = document.querySelectorAll('.text-body > p,.text-body > ul,.text-body > h1,.text-body > h2,.text-body > h3,.text-body > h4,.text-body > h5');

types[types.length - 1].className += ' last';

…与以下jQuery相比,这是令人厌恶的：

$('.text-body').children('p,h5').last().addClass('last');

注意

:nth-last-child(1 of p,h5)

不等于

:last-child:matches(p,h5)

因为后者匹配其父项的最后一个子项,当且仅当它是这些元素类型中的任何一个时.换句话说,：last-child：matches(…)是选择器4相当于p,ul … {&：last-child {…}}(Harry答案的第二部分).