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

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

之前是用jQuery实现的，没有想到css3也可以实现（点击“加载更多”拉取数据的时候也起作用）

---

html:

<div class="key_box">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
        <a href="#">链接6</a>
    </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个，第三个开始隐藏掉了）

结果.png

附：

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的标签

方法二：（也可以实现，但不推荐！！）

其实思路就是通过JQ给之后不显示的标签增加display:none

  <script>
        var num = $('.key_box').children('a').length;
        for (var i = 0; i < num; i++) {
            if (i > 2) {
                $('.key_box a')[i].style.display = 'none';
            }
        }
    </script>

本文只是笔记整理，供学习参考！不喜无喷！有错可纠正！多谢哈！