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

 
短视频,自媒体,达人种草一站服务

需求:

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

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

html部分:

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

dawei

【声明】:北京站长网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。