加入收藏 | 设为首页 | 会员中心 | 我要投稿 云计算网_泰州站长网 (http://www.0523zz.com/)- 视觉智能、AI应用、CDN、行业物联网、智能数字人!
当前位置: 首页 > 综合聚焦 > 创业热点 > 点评 > 正文

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

发布时间:2020-11-23 22:31:34 所属栏目:点评 来源:网络整理
导读:短视频,自媒体,达人种草一站服务 需求: ①前端页面最多显示三个tag,多余的在代码中全部显示。 ②且在调用接口的时候也要起作用,后端到时会将全部数据渲染出。 html部分: predivspan1/spanspan2/spanspan3/spanspan4/spanspan5/spanspan6/span/div/pre

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

需求:

①前端页面最多显示三个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的标签

(编辑:云计算网_泰州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读