解决first-child、last-child 不生效问题

最新推荐文章于 2023-11-09 10:36:49 发布

原创最新推荐文章于 2023-11-09 10:36:49 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文探讨了在复杂HTML结构中，仅使用first-child、last-child伪类可能导致的选择器失效问题，并介绍了如何通过:last-of-type伪类来精确地定位特定类型的最后一个子元素，从而实现更准确的样式控制。

问题描述：用结构伪类first-child、last-child有时会失效
原因：选择器的生效条件其实是div最后一个子元素必须是p，但实际HTML结构中，总会各种类型元素夹杂穿插在一起
解决方法：使用div p:last-of-type，只会从p元素中找，会忽略其他类型元素，
p:last-of-type {background-color: blue;}