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

来源：田珊珊个人博客 时间：2020-11-17

需求：

①前端页面最多显示三个tag，多余的在代码中全部显示。

②且在调用接口的时候也要起作用，后端到时会将全部数据渲染出。

html部分:

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

 

 

css部分:

<pre><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></pre>

 

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

文章来源：田珊珊个人博客

来源地址：http://www.tianshan277.com/717.html

相关文章

标签：
电脑版 手机版 联系我们 版权声明

A5创业网 版权所有

返回顶部