<ul id="ul">
<a href=""></a>
<li></li>
<li></li>
<p></p>
</ul>
类似以上结构的
因为ul作为父盒子,里面有a标签排前或排后,你css如下获取最后li的话
#ul li:last-child{
color:black;
}
以上li最后一个元素是肯定不生效的
因为last-child:指的是父元素的第一个元素,在上面的例子中,要实现样式的话需要保证父元素ul内的li元素除li元素之外没有兄弟元素,或者在创建一个单独 div 包裹起来;first-child也是如此;
那么怎么解决呢,第一种方法用就是用js脚本,例如用prev(),next()等,看你自己想怎么获取
另一种方法是用css,用css的first-of-type伪元素,但是当父元素内的子元素只有一个时,你只能用first-of-type属性获取该子元素,不能用last-of-type获取该子元素;
#ul li::last-of-type{
color:black;
}
first-of-type:指的是父元素下,相同类型子元素中的第一个。如上父元素ul的li:last-of-type 元素是li中最后一个元素,所以生效了;
last-child 和 last-of-type 原理类似;