pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

如何在css中顯示塊的前N個元素并隱藏其他元素

How to show the first N elements of a block and hide the others in css?(如何在css中顯示塊的前N個元素并隱藏其他元素?)
本文介紹了如何在css中顯示塊的前N個元素并隱藏其他元素?的處理方法,對大家解決問題具有一定的參考價值,需要的朋友們下面隨著小編來一起學習吧!

問題描述

我試圖隱藏塊 .container 內(nèi)具有類 .row 的前 3 個元素.

I am trying to hide the first 3 elements having the class .row inside the block .container.

我正在做的是首先隱藏所有 .row,然后我嘗試使用 .row 顯示前 3 個 .row:nth-child(-n+3)

What I'm doing is hiding all the .row first, and then I am trying to display the first 3 .row by using .row:nth-child(-n+3)

jsfiddle 在這里:http://jsfiddle.net/z8fMr/1/

jsfiddle here: http://jsfiddle.net/z8fMr/1/

.row {
  display: none;
}

.row:nth-child(-n+3) {
  display: block;
}

<div class="content">

  <div class="notarow">I'm not a row and I must remain visible</div>
  <div class="row">Row 1</div>
  <div class="row">Row 2</div>
  <div class="row">Row 3</div>
  <div class="row">Row 4</div>
  <div class="row">Row 5</div>
  <div class="row">Row 6</div>

</div>

我這里有兩個問題:

  1. 第 3 行不顯示,是不是我用錯了 nth-child?
  2. 有沒有比隱藏所有內(nèi)容然后創(chuàng)建特定規(guī)則來顯示我想要的前 n 個元素更好的做法?css 中有沒有辦法只顯示前 3 個 .row 然后隱藏所有其他 .row ?
  1. Row 3 is not displayed, am I using nth-child in the wrong way?
  2. Is there a better practice than hiding everything and then creating a specific rule to display the n first elements that I want? Is there a way in css to just display the first 3 .row and then hide all the other .row ?

謝謝.

推薦答案

  1. 您有一個 .notarow 作為第一個孩子,因此您必須在 :nth-child() 公式中考慮這一點.由于那個 .notarow,你的第一個 .row 成為了父級的第二個孩子,所以你必須從第二個到第四個開始計數(shù):

  1. You have a .notarow as the first child, so you have to account for that in your :nth-child() formula. Because of that .notarow, your first .row becomes the second child overall of the parent, so you have to count starting from the second to the fourth:

 .row:nth-child(-n+4) {
     display: block;
 }

更新小提琴

.row {
    display: none;
}

.row:nth-child(-n+4) {
    display: block;
}

<div class="content">
    <div class="notarow">I'm not a row and I must remain visible</div>
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
    <div class="row">Row 3</div>
    <div class="row">Row 4</div>
    <div class="row">Row 5</div>
    <div class="row">Row 6</div>
</div>

你做的很好.

這篇關(guān)于如何在css中顯示塊的前N個元素并隱藏其他元素?的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網(wǎng)!

【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題,如果有圖片或者內(nèi)容侵犯了您的權(quán)益,請聯(lián)系我們刪除處理,感謝您的支持!

相關(guān)文檔推薦

Style every third element?(每隔三個元素設(shè)置樣式?)
Why shouldn#39;t I use ID selectors in CSS?(為什么我不應(yīng)該在 CSS 中使用 ID 選擇器?)
What does img[class*=quot;alignquot;] mean in CSS?(CSS 中的 img[class*=“align] 是什么意思?)
CSS: Last element on line(CSS:最后一個元素)
How do I select every other div class element using just CSS (no js)(如何僅使用 CSS(無 js)選擇所有其他 div 類元素)
Tool for checking unused CSS selectors?(檢查未使用的 CSS 選擇器的工具?)
主站蜘蛛池模板: 塑胶地板-商用PVC地板-pvc地板革-安耐宝pvc塑胶地板厂家 | 干式变压器厂_干式变压器厂家_scb11/scb13/scb10/scb14/scb18干式变压器生产厂家-山东科锐变压器有限公司 | 山东彩钢板房,山东彩钢活动房,临沂彩钢房-临沂市贵通钢结构工程有限公司 | 污水处理设备,一体化泵站,一体化净水设备-「梦之洁环保设备厂家」 | 专业广州网站建设,微信小程序开发,一物一码和NFC应用开发、物联网、外贸商城、定制系统和APP开发【致茂网络】 | 干粉砂浆设备_干混砂浆生产线_腻子粉加工设备_石膏抹灰砂浆生产成套设备厂家_干粉混合设备_砂子烘干机--郑州铭将机械设备有限公司 | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 南京展台搭建-南京展会设计-南京展览设计公司-南京展厅展示设计-南京汇雅展览工程有限公司 | 花纹铝板,合金铝卷板,阴极铝板-济南恒诚铝业有限公司 | 顺景erp系统_erp软件_erp软件系统_企业erp管理系统-广东顺景软件科技有限公司 | 天长市晶耀仪表有限公司 | 工业胀紧套_万向节联轴器_链条-规格齐全-型号选购-非标订做-厂家批发价格-上海乙谛精密机械有限公司 | 耐热钢-耐磨钢-山东聚金合金钢铸造有限公司 | 泵阀展|阀门展|水泵展|流体机械展 -2025上海国际泵管阀展览会flowtech china | 医养体检包_公卫随访箱_慢病随访包_家签随访包_随访一体机-济南易享医疗科技有限公司 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | ET3000双钳形接地电阻测试仪_ZSR10A直流_SXJS-IV智能_SX-9000全自动油介质损耗测试仪-上海康登 | 亿诺千企网-企业核心产品贸易| 西门子代理商_西门子变频器总代理-翰粤百科 | 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 柴油机_柴油发电机_厂家_品牌-江苏卡得城仕发动机有限公司 | 厂房出售_厂房仓库出租_写字楼招租_土地出售-中苣招商网-中苣招商网 | 净化工程_无尘车间_无尘车间装修-广州科凌净化工程有限公司 | 齿辊分级破碎机,高低压压球机,立式双动力磨粉机-郑州长城冶金设备有限公司 | 防爆正压柜厂家_防爆配电箱_防爆控制箱_防爆空调_-盛通防爆 | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 塑料熔指仪-塑料熔融指数仪-熔体流动速率试验机-广东宏拓仪器科技有限公司 | UV固化机_UVLED光固化机_UV干燥机生产厂家-上海冠顶公司专业生产UV固化机设备 | 游泳池设计|设备|配件|药品|吸污机-东莞市太平洋康体设施有限公司 | 干培两用箱-细菌恒温培养箱-菲斯福仪器 | 法兰螺母 - 不锈钢螺母制造厂家 - 万千紧固件--螺母街 | 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 上海办公室装修,写字楼装修—启鸣装饰设计工程有限公司 | 食安观察网| 成都离婚律师|成都结婚律师|成都离婚财产分割律师|成都律师-成都离婚律师网 | 深圳诚暄fpc首页-柔性线路板,fpc柔性线路板打样生产厂家 | 广西资质代办_建筑资质代办_南宁资质代办理_新办、增项、升级-正明集团 | 电池挤压试验机-自行车喷淋-车辆碾压试验装置-深圳德迈盛测控设备有限公司 | 超声骨密度仪,双能X射线骨密度仪【起草单位】,骨密度检测仪厂家 - 品源医疗(江苏)有限公司 | 淬火设备-钎焊机-熔炼炉-中频炉-锻造炉-感应加热电源-退火机-热处理设备-优造节能 |