"nth-last-child(1)" 未针对最后一个元素

Question

我不完全理解某些 css 伪 class select 的行为。

看看这个简单的 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-childselector会找到target，找他的parent和selecttarget对应的nth-child

感谢您的帮助。

安德里亚

Answer 1

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

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

该脚本元素被 :nth-last-child(1) 定位，它不关心元素类型。只看兄弟姐妹

您必须：

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

jsFiddle demo

Answer 2

它会 select 最后 div。但是您发布的 HTML 结构不是“真实的”结构。

我敢打赌，在您测试的地方，还有一些其他元素是那些 div 的兄弟元素。比如<script> <footer>等等所以body

里面没有带标签div的nth-last-child(1)

所以这行得通。

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>

"nth-last-child(1)" 未针对最后一个元素

"nth-last-child(1)" not targeting last element

html

css

css-selectors

pseudo-class