“nth-last-child(1)”不针对最后一个元素[重复]答案

【问题标题】："nth-last-child(1)" not targeting last element [duplicate]“nth-last-child(1)”不针对最后一个元素[重复]
【发布时间】：2020-02-20 20:39:28
【问题描述】：

我没有完全理解一些 css 伪类选择器的行为。

看看这个简单的html模板：

 <body>

  <div>
   <p>One</p>
   <p>Two</p>
  </div>

  <div>
   <p>Three</p>
   <p>Four</p>
  </div>

  <div>
   <p>Five</p>
   <p>Six</p>
  </div>

  <div>
   <p>Seven</p>
   <p>Eight</p>
  </div>

 </body>

我不明白为什么下面的 css 实际上会将样式应用于第一个 div：

div:nth-child(1){
 color: red;
}

并且下面的 css 不会将样式应用到最后一个 div：

div:nth-last-child(1){
 color: red;
}

据我了解nth-child选择器会找到目标，寻找他的父母并选择与目标相对应的nth-child。

感谢您的帮助。

安德烈亚

【问题讨论】：

div:nth-last-child(1) 为什么会选择倒数第二个 div ？为什么不是最后一个？与last-child 相同。 nth-last-child(1) 它从最后读取第一个孩子。
是的对不起，它应该选择最后一个 div 但它没有...
确保 DOM 在元素结构方面与您在 HTML 中编写的内容完全匹配，否则这将不起作用。例如，如果您将整个内容放入 jsfiddle 中，它会自动在正文的末尾插入一个脚本元素 - 使 that 成为实际的最后一个子元素。您显示的代码按预期工作，如果生成的 DOM 不会因外部因素而变得混乱。

标签： html css css-selectors pseudo-class

【解决方案1】：

div:nth-last-child(1) 的问题是最后一个 div 不是最后一个孩子。

一些 IDE，例如 jsFiddle，会在文档树中插入一个脚本元素。

该脚本元素是:nth-last-child(1) 的目标，它不关心元素类型。它只查看兄弟姐妹。

您必须：

去掉脚本元素
使用div:nth-last-child(2)
使用div:nth-last-of-type(1)

jsFiddle demo

【讨论】：

没错，我使用的是vscode live server，它确实在最后注入了一个脚本标签。感谢您的解决方案。
@AndreaMeAndyFiorucci (4) 考虑您将放置元素的容器。解决方案 (2)(3) 可能不起作用，因为某些工具添加了多个元素，例如 SO sn-p

【解决方案2】：

它确实选择了最后一个 div。但是您发布的 HTML 结构不是“真正的”结构。

我敢打赌，你测试的地方还有一些其他元素是这些 div 的兄弟。比如<script><footer>等。所以nth-last-child(1)里面没有div标签body

所以这行得通。

div:nth-child(1) {
  color: red;
}

div:nth-last-child(1) {
  color: red;
}

 <section>
   <div>
     <p>One</p>
     <p>Two</p>
   </div>

   <div>
     <p>Three</p>
     <p>Four</p>
   </div>

   <div>
     <p>Five</p>
     <p>Six</p>
   </div>

   <div>
     <p>Seven</p>
     <p>Eight</p>
   </div>
 </section>

但是如果你在最后一个 div 之后有另一个元素，它就不起作用了，因为现在 div 是倒数第二个元素，而不是最后一个。

div:nth-child(1) {
  color: red;
}
/* this doesn't work */
div:nth-last-child(1) {
  color: red;
}
/* this works */

div:nth-last-child(2) {
  color: red;
}

 <section>
   <div>
     <p>One</p>
     <p>Two</p>
   </div>

   <div>
     <p>Three</p>
     <p>Four</p>
   </div>

   <div>
     <p>Five</p>
     <p>Six</p>
   </div>

   <div>
     <p>Seven</p>
     <p>Eight</p>
   </div>
   <h1>
     Hello there
   </h1>
 </section>

【讨论】：