baz*_*ush 5 html css css-selectors pseudo-class css3
我试过这个;
@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中的最后一个元素,无论它是什么,但是在选择器中指定的元素类型中.
听起来你可能正在寻找
.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永远比不上给出的选择列表任何这样的表达-其实span本身可以表示为:not(p, ul, h1, h2, h3, h4, h5).
虽然:nth-child(),:nth-last-child()并且:not()都在选择器3中引入,但是选择器列表参数对于选择器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(...)Selectors 4是否等同于p, ul... { &:last-child { ... } }(Harry的答案的第二部分).
如果您需要选择父元素中的最后一个子元素，无论其元素类型如何，那么您需要使用:last-child如下简单的选择器：
& > :last-child{
background-color:green;
}
无论元素是什么类型，上面的选择器都会选择last-child内部元素。.text-body
在下面的代码片段中，您可以看到如何将background-color: green应用于last-child两个.text-body块的 ，即使last-child第一个块中的 是 ap并且第二个块中的 是 a span。
& > :last-child{
background-color:green;
}
.text-body p,
.text-body ul {
margin-bottom: 1em;
}
.text-body >:last-child {
background-color: green;
}另一方面，如果您只想在其元素类型是值列表之一时选择最后一个子元素，那么您需要使用last-child带有额外条件的选择器，如下所示：
>p, >ul, >h1, >h2, >h3, >h4, >h5{
&:last-child{
background-color:green;
}
}
当元素类型为, , , , , ,last-child之一时，上面的选择器将选择。pulh1h2h3h4h5
如果 的元素类型last-child不是这些，则组合标准将不匹配，因此不会应用样式。在下面的代码片段中，您可以看到如何background-color: green将 应用于last-child第一个.text-body而不是第二个，.text-body因为在第二个中，最后一个子级是 a span。
<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>>p, >ul, >h1, >h2, >h3, >h4, >h5{
&:last-child{
background-color:green;
}
}