婷婷久久综合九色综合,欧美成色婷婷在线观看视频,偷窥视频一区,欧美日本一道道一区二区

<tt id="bu9ss"></tt>
  • <span id="bu9ss"></span>
  • <pre id="bu9ss"><tt id="bu9ss"></tt></pre>
    <label id="bu9ss"></label>

    當(dāng)前位置:首頁 >  站長 >  編程技術(shù) >  正文

    控制標(biāo)簽的顯示數(shù)量—css3: nth-child()

     2020-11-17 14:19  來源: 田珊珊個(gè)人博客   我來投稿 撤稿糾錯(cuò)

      阿里云優(yōu)惠券 先領(lǐng)券再下單

    需求:

    ①前端頁面最多顯示三個(gè)tag,多余的在代碼中全部顯示。

    ②且在調(diào)用接口的時(shí)候也要起作用,后端到時(shí)會(huì)將全部數(shù)據(jù)渲染出。

    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> /* 表示選擇列表中的標(biāo)簽從0到3,即小于3的標(biāo)簽 */ .key_box a:nth-child(-n+3) { color: green; } /* 表示選擇列表中的標(biāo)簽從第3個(gè)開始一直到最后 */ .key_box a:nth-child(n+4) { /* color: green; */ display: none; } </style></pre>

     

    結(jié)果:(只顯示3個(gè),第三個(gè)開始隱藏掉了)

    附:

    css3:nth-child選取第幾個(gè)標(biāo)簽元素

    選擇標(biāo)簽選擇第幾個(gè)

    nth-child(3)選擇第3個(gè)

    nth-child(2n)選擇偶數(shù)標(biāo)簽

    nth-child(2n-1)選擇奇數(shù)標(biāo)簽

    nth-child(n+3)選擇從第3個(gè)標(biāo)簽開始到最后

    nth-child(-n+3)選擇從第0到3,即小于3的標(biāo)簽

    文章來源:田珊珊個(gè)人博客

    來源地址:http://www.tianshan277.com/717.html

    申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

    相關(guān)文章

    熱門排行

    信息推薦