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

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

html部分:

1

2

3

4

5

6

css部分:

/* 表示选择列表中的标签从0到3，即小于3的标签 */

.key_box a:nth-child(-n+3) {

color: green;

}

/* 表示选择列表中的标签从第3个开始一直到最后 */

.key_box a:nth-child(n+4) {

/* color: green; */

display: none;

}

结果：(只显示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的标签

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创