<bdo id="vljxk"><rt id="vljxk"><noframes id="vljxk"><noframes id="vljxk"><noframes id="vljxk"><rt id="vljxk"></rt><rt id="vljxk"></rt><noframes id="vljxk"><rt id="vljxk"><delect id="vljxk"></delect></rt><noframes id="vljxk"><rt id="vljxk"></rt><noframes id="vljxk"><noframes id="vljxk"><rt id="vljxk"></rt>

當前位置:首頁 >  站長 >  編程技術 >  正文

控制標簽的顯示數量—css3: nth-child()

 2020-11-17 14:19  來源: 田珊珊個人博客   我來投稿 撤稿糾錯

  阿里云優惠券 先領券再下單

需求:

①前端頁面最多顯示三個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

申請創業報道,分享創業好點子。點擊此處,共同探討創業新機遇!

相關文章

熱門排行

信息推薦