導讀:CSS/HTMLCSS/HTML需求： ①前端頁面最多顯示三個tag，多余的在代碼中全部顯示。 ②且在調用接口的時候也要起作用，后端到時會將全部數據渲染出。 之前是用jQuery實現的，沒有想高端網站建設建設網站公司。

需求： ①前端頁面最多顯示三個tag，多余的在代碼中全部顯示。 ②且在調用接口的時候也要起作用，后端到時會將全部數據渲染出。 之前是用jQuery實現的，沒有想到css3也可以實現（點 […]

需求： ①前端頁面最多顯示三個tag，多余的在代碼中全部顯示。 ②且在調用接口的時候也要起作用，后端到時會將全部數據渲染出。

之前是用jQuery實現的，沒有想到css3也可以實現（點擊“加載更多”拉取數據的時候也起作用）

---

html:

<div class="key_box"> <a href="#">鏈接1</a> <a href="#">鏈接2</a> <a href="#">鏈接3</a> <a href="#">鏈接4</a> <a href="#">鏈接5</a> <a href="#">鏈接6</a> </div>

css:

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

結果：（只顯示3個，第三個開始隱藏掉了）

結果.png

附：

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的標簽

方法二：（也可以實現，但不推薦！！）

關鍵詞標簽: 標簽 奇偶