原创投稿
  1. 创想鸟首页
  2. 用户投稿

css伪类:last-of-type与nth-of-type应用案例

程序猿 • • 用户投稿

:last-of-type选择同类型最后一个元素，如取消末段下边距；:nth-of-type(n)按顺序选第n个同类元素，可实现隔行变色或前几项加粗；二者结合能精准控制样式，减少冗余类名，提升维护性。

css伪类:last-of-type与nth-of-type应用案例

在CSS中，:last-of-type 和 :nth-of-type 是两个非常实用的结构伪类选择器，它们可以根据元素在父容器中的位置关系来精确选择目标元素。下面通过实际应用案例说明它们的用法和区别。

:last-of-type：选择同类型中的最后一个元素

:last-of-type 会选中其父元素下同一类型标签的最后一个实例。这个“类型”指的是元素的标签名。

常见应用场景：在文章内容中，为最后一个段落取消底部边距：

p:last-of-type { margin-bottom: 0; }

如果一篇文章包含多个

标签，这样可以避免最后一个段落后留出多余空白。

立即学习“前端免费学习笔记（深入）”；

在混合标签结构中突出最后一个列表项：

例如以下HTML：

  
段落1
  
  • 列表1
  
段落2
  
  • 列表2
  
  • 列表3

使用：

ul:last-of-type { border: 2px solid blue; }

只有最后一个

    被选中并添加边框。

    :nth-of-type(n)：按类型顺序选择第n个元素

    :nth-of-type(n) 可以根据元素在其父级中同类标签的顺序位置进行选择，支持数字、公式或关键字（如 even, odd）。

    典型使用示例：实现隔行变色的表格样式：

    tr:nth-of-type(odd) { background-color: #f9f9f9; }
    tr:nth-of-type(even) { background-color: #eee; }

    Waymark Waymark

    Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。

    Waymark 79 查看详情 Waymark

    即使表格中有

    或其他结构，也能正确按 tr 的顺序着色。

    选择前三个段落并加粗：

    p:nth-of-type(-n+3) { font-weight: bold; }

    这会匹配前3个

    元素，常用于文章开头强调。

    为特定位置的子元素设置样式，比如第二个图片：

    img:nth-of-type(2) { border-radius: 8px; }

    页面中第二个 元素将被加上圆角。

    两者结合使用的场景

    有时可组合使用以实现更精细控制。例如：

    只对非最后一个段落设置下边框：

    p:not(:last-of-type) { border-bottom: 1px solid #ccc; }

    这样每段之间有分隔线，但最后一段不会多出一条无意义的底线。

    基本上就这些。合理使用 :last-of-type 和 :nth-of-type 能减少HTML中冗余的类名，让样式更智能、更易维护。关键是理解“类型”是指相同标签名在父元素内的排列顺序。不复杂但容易忽略细节。

    以上就是css伪类:last-of-type与nth-of-type应用案例的详细内容，更多请关注创想鸟其它相关文章！

    版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
    如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
    发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1003108.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
java对数组越界异常怎么办
上一篇 2025年12月1日 23:27:21
sql中group by和oder by怎么一起使用
下一篇 2025年12月1日 23:27:28

相关推荐

发表回复

登录后才能评论
关注微信