css 同类名选择第二个元素last-child不生效

Question

`
.alert_tell .service:last-child{

background: violet;

}
`
选择不上最后一个.service 求教

Answer 1

<div class="alert_tell1">
  <h3>标题</h3>
  <div class="business">business</div>
  <div class="service">第一个 service</div>
  <div class="service">第二个 service</div>
  <div class="closepopup">取消</div>
</div>
  


<hr>
  
<div class="alert_tell2">
  <h3>标题</h3>
  <div class="business">business</div>
  <div class="service">第一个 service</div>
  <div class="service">第二个 service</div>
</div>
<span class="closepopup">取消</span>

.alert_tell1 :nth-last-child(2) {
  background: red;
}

.alert_tell2 .service:last-child {
  background: violet;
}

两个方案供参考：

1. 如果能确定 .service 是最后第二个的话，可以用 :nth-last-child(2) 来选择；
2. 实在不行，就把那个 .closepopup 从 .alert_tell 中移出来，这样你的 .service 就是最后一个了；

Answer 2

from https://developer.mozilla.org...:last-child
:last-child CSS 伪类 代表父元素的最后一个子元素。

如.item:last-child,选中并不是指.item类中的最后一个元素, 而是既是.item 又是 父元素的最后一个子元素 的元素

所以和你题目中问的第二元素没有关系, 他没有生效的原因是该元素并不是父元素的最后一个元素

Answer 3

Answer 4

你的取消才是最后一个元素...

Answer 5

用nth-child(3)