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

原文 标签 html css css-selectors pseudo-class

我试过这个;

@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 中的最后一个元素,无论它是什么,但在选择器中指定的元素类型内。

fiddle ;
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 中选择它们的最后一次出现。一个例证:
<div class="text-body">
  <h1></h1>
  <p></p>
  <ul></ul>
  <h2></h2>
  <p></p>
  <span></span>
</div>

在这个例子中,有六个 child ,其中五个是 p, ul, h1, h2, h3, h4, h5 中的任何一个。这五个元素中的最后一个元素是 p ,它紧跟在 span 之前,因此它与上面的选择器匹配。 h1 将匹配等效的 :nth-child() 表达式,而 span 永远不会匹配给定选择器列表的任何此类表达式——事实上,span 本身可以表示为 :not(p, ul, h1, h2, h3, h4, h5)

虽然 :nth-child():nth-last-child():not() 都是在 Selectors 3 中引入的,但 selector-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, ul, h1, h2, h3, h4, h5').last().addClass('last');

注意
:nth-last-child(1 of p, ul, h1, h2, h3, h4, h5)

不等于
:last-child:matches(p, ul, h1, h2, h3, h4, h5)

因为后者匹配其父元素的最后一个子元素当且仅当它是这些元素类型中的任何一种。换句话说, :last-child:matches(...)p, ul... { &:last-child { ... } } 的 Selectors 4 等价物(Harry 答案的第二部分)。

关于html - 使用 CSS 定位一组元素类型中的最后一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31676178/

相关文章:

javascript - 删除<img>标签周围的边框和jQuery延迟加载

javascript - 使用javascript刷新我的html页面时如何清除按钮单击?

php - 从空值创建默认对象-简单的HTML DOM

css - 在CSS中更改悬停时的填充

javascript - 如何为Google字体进行后备广告?

javascript - SignalR聊天:区分CSS的ListItem发送者和接收者

css - :not(.MyClass)选择器重要

css - 如何在Susy 2中的嵌套网格/行元素之间设置边距

CSS 子选择器

html - 仅在显示此跨度时选择下一个同级