写css的时候碰到一个神奇的问题,first-child生效、但last-child失效。
观察样式和代码结构如下:
<div class="c0">
<div class="c1"></div>
<div class="c1"></div>
<div class="loading"></div>
</div>
.c0 .c1:last-child {
padding: 10px;
}
原因是,
.c0 .c1:first-child
, 这个选择器发现c0
下第一个确实是c1
,匹配到了第一行,生效。
.c0 .c1:last-child
,这个选择器的生效条件其实是c0
最后一个子元素必须是c1
,但实际HTML结构中,最后一个是loading
,所以没生效。
解决办法有2个:
1、保证c0
是新嵌套div的最后一个元素。但很难做到,实际情况总会各种类型元素夹杂穿插在一起。
2、使用.c0 .c1:last-of-type