CSS上一个子选择器:选择特定类的最后一个元素,而不是父内部的最后一个子元素?


174
<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

我要选择#com19

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

只要我div.something在commentList中有另一个作为实际的最后一个孩子,那就行不通。在这种情况下是否可以使用last-child选择器来选择的最后出现article.comment

jsFiddle

Answers:


227

:last-child仅在相关元素是容器的最后一个子元素而不是特定类型元素的最后一个元素时起作用。为此,你想要:last-of-type

http://jsfiddle.net/C23g6/3/

根据@BoltClock的注释,这仅检查最后一个article元素,而不检查类为的最后一个元素.comment

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>


146
但是,它不会只查看类,而只会查看类型,因此,如果您碰巧遇到非同一类的文章,则会得到意外的结果。
BoltClock

1
它正常工作。但是,如果我们需要它们按类缩小元素范围,那么它将不再起作用。jsfiddle.net/aliemreeee/a4H7f/2
Ali EmreÇakmakoğlu2014年

12
根据这些答案,我认为没有选择的余地last-of-class
toobulkeh 2015年

14
直到CSS选择器级别4被浏览器接受并实现,您才能在其中访问:nth-match(selector):nth-last-match(selector)。有关更多详细信息,请参见w3.org/TR/selectors4
克里斯

1
或者说,:nth-last-child(An+B of selector)作为:nth-last-match()长期被丢弃在此之前,但他们并没有费心去更新WD。见stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/...
BoltClock

6

如果您浮动元素,则可以颠倒顺序

float: right;代替float: left;

然后使用此方法选择类的第一个孩子。

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

实际上,这实际上是将类应用于LAST实例,因为它现在的顺序相反。

这是一个适合您的工作示例:

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>

请注意,如果将浮动元素推到下一行(即水平空间不足以向右/向左浮动),则无法使用
Ozzy 2013年

.some-class~.some-class仅重复2个元素,对我来说效果很好。
Meloman '18 -4-5

4

我猜最正确的答案是:使用:nth-child(或在这种情况下,使用它的对应物:nth-last-child)。大多数人只知道该选择器的第一个参数可以根据使用n进行的计算来获取一系列项目,但是它也可以使用第二个参数“ [any CSS selector]”。

您的方案可以使用以下选择器解决: .commentList .comment:nth-last-child(1 of .comment)

但是,技术上正确并不意味着您可以使用它,因为该选择器目前仅在Safari中实现。

进一步阅读:


1

我认为在这里对我有用的东西应该被评论:

:last-child在需要的地方多次使用,以便始终获得倒数第二个。

以这个为例:

.page.one .page-container .comment:last-child {
  color: red;
}
.page.two .page-container:last-child .comment:last-child {
  color: blue;
}
<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>

<div class="page one">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>

<div class="page two">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>


0

那这个解决方案呢?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}

@lsblsb,您article在这里使用,因此对于给定的示例,:not(:last-child)不是必需的。
ЕвгенийМасленков

如果具有class的元素something在原始HTML中不存在并且动态地插入该hover怎么办?这个解决方案不会失败吗?
Fr0zenFyr

-1

如果最后一个元素类型也是商品,last-of-type则无法按预期工作。

也许我不太了解它是如何工作的。

演示

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.