CSS：last-child 选择器不起作用[重复]答案

【问题标题】：CSS :last-child Selector doesn't work [duplicate]CSS：last-child 选择器不起作用[重复]
【发布时间】：2018-01-09 02:26:33
【问题描述】：

我使用 :last-child 选择器，但它不起作用。示例：

.last {background:blue;border-bottom:1px solid #cccccc;}

.last:last-child {background:red;border-bottom:0px solid #cccccc;}

jsfiddle example

谢谢大家的回答。

但我还有一个问题。 jsfiddle example 2

.big_box {
  background:#eeeeee;
  height:500px;
}

.last {
  width:90%;
  margin:auto;
background: yellow;
 border-bottom: 1px solid #cccccc;
}
.last:last-child {
    background: red;
     border-bottom: 0px solid #cccccc;
}

<div class="big_box">
  <div class="other">the other paragraph.</div>
  <div class="last">The first paragraph.</div>
  <div class="last">The second paragraph.</div>
  <div class="last">The third paragraph.</div>
  <div class="last">The fourth paragraph.</div>
  <div class="other">the other paragraph.</div>
  <div class="other">the other paragraph.</div>
  <div class="other">the other paragraph.</div>
</div>

【问题讨论】：

这只是一个 jsfiddle 怪癖。将您的 div 包装在父 div 中，它工作正常。
另一个问题：jsfiddle.net/6dpodkkx/2
这里有一个你想要得到的帖子stackoverflow.com/questions/7298057/…我认为这个帖子是重复的
@lucianov88 谢谢，但他使用了不同的类型（div 和 article）。

标签： css select css-selectors

【解决方案1】：

第一季度的答案：（更新您的帖子之前）

<div class="last">The fourth paragraph.</div> 是最后一个没有最后一个，因为在小提琴中你的代码就像（使用开发工具）：

<body>
  <div class="last">The first paragraph.</div>
  <div class="last">The second paragraph.</div>
  <div class="last">The third paragraph.</div>
  <div class="last">The fourth paragraph.</div>
  <script>...</script>
</body>

所以，最后一个孩子是<script> 不是<div class="last">The fourth paragraph.</div>。

修复我使用的：

.last:nth-last-child(2) {
    background: red;
     border-bottom: 0px solid #cccccc;
}

Demo

你也可以使用div:last-of-type：

Demo

谢谢@Michael_B。

第二季度的答案：（更新您的帖子后）：

你必须使用.last:nth-child(5) {：

Demo

【讨论】：

太棒了！这就是答案。（而且它在我的屏幕上打开开发工具时盯着我的脸！smh）..干得好！
@Michael_B，不客气！
脚本元素也是栈 sn-p 中的最后一个子元素。
div:last-of-type / .last:last-of-type 也可以。 jsfiddle.net/6dpodkkx/7

【解决方案2】：

您需要做的是使用包装元素。使用时检查一下。

JSFiddle

<div>
  <div class="last">The first paragraph.</div>
  <div class="last">The second paragraph.</div>
  <div class="last">The third paragraph.</div>
  <div class="last">The fourth paragraph.</div>
</div>

.last {
background: yellow;
 border-bottom: 1px solid #cccccc;
}
.last:last-child {
    background: red;
     border-bottom: 0px solid #cccccc;
}

【讨论】：

感谢您的回答，但我还有其他问题。
jsfiddle.net/6dpodkkx/2 在这个例子中，它不起作用。但我不知道为什么......
AFAIK 由于 CSS 解析器的复杂工作方式而无法正常工作。不幸的是，如果不使用 JS，就无法解决这个问题。
这个答案不正确。 last-child 确实引用了子元素。但是.last 已经是个孩子了。它是body 元素的子元素。
如果它只是 jsFiddle 中的一个错误，那么它会在它自己的页面上工作。事实并非如此。

【解决方案3】：

你应该试试这个

.last{
  background:yellow;
  border-bottom:0px solid #cccccc;
}

.last div:last-child{
  background:red;
  border-bottom:1px solid #cccccc;
}

<div class="last">
  <div>The first paragraph.</div>
  <div>The second paragraph.</div>
  <div>The third paragraph.</div>
  <div>The fourth paragraph.</div>
</div>

【讨论】：

请注意，这不是一回事。在原始示例中，每一行都有自己的边框。
last 类名在这种情况下没有意义。