Question

我不完全了解某些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;
}

据我所知，第n个孩子选择器将找到目标，寻找其父对象并选择与该目标相对应的第n个孩子。

感谢您的帮助。

安德里亚

Answer 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

Answer 2

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

在我敢打赌的情况下，我敢肯定还有其他一些与这些div相同的元素。像async/await <script>等一样，因此<footer>内没有nth-last-child(1)标签为div的

这可行。

body

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

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

但是如果您在最后一个div之后还有另一个元素，那么它将不起作用，因为现在div是倒数第二个元素，而不是最后一个。

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

“ nth-last-child（1）”未定位到最后一个元素

2 个答案: