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

Question

我试过了；

@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/

Answer 1

如果您需要选择父元素中的最后一个子元素而不管其元素类型如何，则需要使用简单的:last-child 选择器，如下所示：

& > :last-child{
  background-color:green;
}

上面的选择器将在.text-body 中选择last-child，不管它是什么类型的元素。

在下面的 sn-p 中，您可以看到 background-color: green 如何应用于两个 .text-body 块的 last-child，即使第一个块中的 last-child 是 p 并且在第二个块是span。

.text-body p,
.text-body ul {
  margin-bottom: 1em;
}
.text-body >:last-child {
  background-color: green;
}

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human
    happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <p>
    Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever
    undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant
    pleasure?
  </p>
</div>

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human
    happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <span>
    Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever
    undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant
    pleasure?
  </span>
</div>

---

另一方面，如果您只想在其元素类型是值列表中的一个时选择最后一个子元素，那么您需要使用带有额外条件的last-child 选择器，如下所示：

>p, >ul, >h1, >h2, >h3, >h4, >h5{
    &:last-child{
        background-color:green;
    }
}

当last-child的元素类型是p、ul、h1、h2、h3、h4、h5之一时，上面的选择器将选择last-child。

如果last-child 的元素类型不是这些，则组合标准将不匹配，因此不会应用样式。在下面的 sn-p 中，您可以看到 background-color: green 如何应用于第一个 .text-body 的 last-child 而不是第二个 .text-body，因为在第二个中，最后一个孩子是 @987654350 @。

.text-body p,
.text-body ul {
  margin-bottom: 1em;
}
.text-body > p:last-child,
.text-body > ul:last-child,
.text-body > h1:last-child,
.text-body > h2:last-child,
.text-body > h3:last-child,
.text-body > h4:last-child,
.text-body > h5:last-child {
  background-color: green;
}

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human
    happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <p>
    Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever
    undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant
    pleasure?
  </p>
</div>

<div class="text-body">
  <h1>Title</h1>
  <p>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human
    happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
  </p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <h2>Subtitle</h2>
  <span>
    Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever
    undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant
    pleasure?
  </span>
</div>

Answer 2

听起来你可能正在寻找

.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>

在此示例中，有六个孩子，其中五个是p, ul, h1, h2, h3, h4, h5 中的任何一个。这五个元素中的最后一个元素是紧接在span 之前的p，因此它与上面的选择器匹配。 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 相同，除了不是类选择器，您正在寻找与 pool 个选项。在这两种情况下，您都在处理元素子集的某个子集的第 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(...) 是 Selectors 4 中的 p, ul... { &:last-child { ... } } 等价物（Harry 回答的第二部分）。