Question

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

只要我在commentList中有另一个div.something作为实际的最后一个孩子，那就不起作用了。在这种情况下是否可以使用最后一个子选择器来选择article.comment的最后一个外观？

jsFiddle

Answer 1

:last-child仅在有问题的元素是容器的最后一个子元素时才有效，而不是特定类型元素的最后一个元素。为此，您需要:last-of-type

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

根据@ BoltClock的评论，这只是检查最后一个article元素，而不是.comment类的最后一个元素。

HTML

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

CSS

body {
    background: black;
}

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

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

Answer 2

如果您正在浮动元素，则可以撤消订单

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

Answer 3

我想最正确的答案是：使用:nth-child（或者，在此特定情况下，使用:nth-last-child）。大多数人只知道这个选择器的第一个参数是基于n的计算来获取一系列项目，但它也可以采用“[任何CSS选择器]”的第二个参数。

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

但技术上正确并不意味着你可以使用它，因为这个选择器现在只在Safari中实现。

进一步阅读：

Answer 4

我认为应该在这里评论一些对我有用的东西：

在所需的地方多次使用: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>

Answer 5

这个解决方案怎么样？

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

Answer 6

方法之一是使用数据属性

.comment {
}

.comment[data-last] {
    color: red;
}

<div class="commentList">
    <article class="comment " id="com21">a1</article>
    <article class="comment " id="com20"> a2</article>
    <article class="comment " id="com19" data-last>a3</article>
    <div class="something"> hello </div>
</div>

Answer 7

如果最后一个元素类型也是商品，则last-of-type将无法正常工作。

也许我不太了解它的工作原理。

demo

CSS last-child选择器：选择特定类的last元素，而不是父类中的最后一个子元素？

7 个答案: