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

听起来你可能正在寻找

.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中的任何一个。这五个中的最后一个元素是紧跟在p之前的span，因此它与上面的选择器匹配。 h1将匹配等效的:nth-child()表达式，而span将永远不会匹配给定selector-list的任何此类表达式 - 事实上，span本身可以表示为:not(p, ul, h1, h2, h3, h4, h5)。

虽然选择器3中引入了:nth-child()，:nth-last-child()和:not()，但选择器列表参数对于选择器4来说是新的。但是还没有人实现它，也没有人实现它知道什么时候会。不幸的是，没有相应的使用当前可用的东西，因为它基本上与this question相同，除了一个类选择器，你正在寻找匹配a的第n个（最后一个）子节点 pool 选项。在这两种情况下，您都要处理元素子元素的某个子集的第n次出现。

最好的办法是使用JavaScript，例如，在页面加载时将这些类添加到这些元素类型中的最后一个实例。使用原生DOM /选择器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(...)是选择器4相当于p, ul... { &:last-child { ... } }（哈利答案的第二部分）。

Answer 2

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

另一方面，如果你想只选择最后一个子元素，当它的元素类型是值列表中的一个时，那么你需要使用last-child选择器和下面的额外条件：

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

当last-child，p，ul，h1，h2中的元素类型为{1}}时，上述选择器将选择h3 ，h4，h5。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: