使用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中的最后一个元素，不管它是什么，但要选择选择器中指定的元素类型。

Fiddle；http://jsfiddle.net/bazzle/bcLt62jx/

Answer 1

听起来你可能在寻找

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

来自选择器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中引入的，但选择器列表参数对Selectors 4来说是新的。但还没有人实现它，也没有人知道它什么时候会实现。不幸的是，目前还没有等效的方法来使用它，因为它基本上是。这与这个问题相同，只是你正在寻找与选项池匹配的第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。

Answer 2

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

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

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

在下面的代码段中，您可以看到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;
    }
}

当元件类型为p、ul、h1、h2、h3、h4、h5中的一个时，上述选择器将选择last-child。

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

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