侧边栏壁纸
博主头像
黑山老妖博主等级

记录精彩的坎坷人生

  • 累计撰写 72 篇文章
  • 累计创建 85 个标签
  • 累计收到 9 条评论

目 录CONTENT

文章目录

控制标签的显示数量—css3: nth-child()

我是我村的希望
2023-04-01 / 0 评论 / 0 点赞 / 8 阅读 / 2129 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-02-21,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

需求:

①前端页面最多显示三个tag,多余的在代码中全部显示。
②且在调用接口的时候也要起作用,后端到时会将全部数据渲染出。

html部分:

<div class="main_box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>

css部分:

<style>
        /* 表示选择列表中的标签从0到3,即小于3的标签 */
      
        .key_box a:nth-child(-n+3) {
            color: green;
        }
        /* 表示选择列表中的标签从第3个开始一直到最后 */
      
        .key_box a:nth-child(n+4) {
            /* color: green; */
            display: none;
        }
    </style>

结果:(只显示3个,第三个开始隐藏掉了)

附:

css3:nth-child选取第几个标签元素

选择标签 选择第几个
nth-child(3) 选择第3个
nth-child(2n) 选择偶数标签
nth-child(2n-1) 选择奇数标签
nth-child(n+3) 选择从第3个标签开始到最后
nth-child(-n+3) 选择从第0到3,即小于3的标签

0
广告 广告

评论区