html – 使用CSS定位一组元素类型中的最后一个元素

我试过这个;

@mixin text-format{
>p,>ul,>h1,>h2,>h3,>h4,>h5{
    &:last-of-type{
        background-color:green;
    }
}
}

.text-body{
@include text-format;
}

纯CSS

.text-body > p:last-of-type,.text-body > ul:last-of-type,.text-body > h1:last-of-type,.text-body > h2:last-of-type,.text-body > h3:last-of-type,.text-body > h4:last-of-type,.text-body > h5:last-of-type {
  background-color: green;
}

这将选择每个元素类型的最后一个实例,但不包括该元素类型.我只想选择div中的最后一个元素,无论它是什么,但是在选择器中指定的元素类型中.

小提琴;
http://jsfiddle.net/bazzle/bcLt62jx/

最佳答案

听起来你可能正在寻找

.text-body > :nth-last-child(1 of p,ul,h1,h2,h3,h4,h5)

从Selectors 4(最初推测为:nth-last-match()).这会将潜在匹配列表限制为仅包含这些元素类型,并在父元素.text-body中选择它们的最后一个匹配项.举例说明：


在这个例子中,有六个孩子,其中五个是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答案的第二部分).

html – 使用CSS定位一组元素类型中的最后一个元素

相关文章