控制标签的显示数量—css3: nth-child()
- 作者:admin
- 发表时间:2020-11-18 07:50
- 来源:未知
需求:
①前端页面最多显示三个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
唐山网络公司