如何在css中显示块的前N个元素并隐藏其他元素?

Posted

技术标签:

【中文标题】如何在css中显示块的前N个元素并隐藏其他元素?【英文标题】:How to show the first N elements of a block and hide the others in css? 【发布时间】:2012-08-08 23:10:49 【问题描述】:

我正在尝试将具有 .row 类的前 3 个元素隐藏在块 .container 内。

我正在做的是首先隐藏所有.row,然后我尝试使用.row:nth-child(-n+3)显示前3个.row

jsfiddle 在这里: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>

我这里有两个问题:

    第 3 行不显示,是不是我用错了 nth-child? 有没有比隐藏所有内容然后创建特定规则来显示我想要的前 n 个元素更好的做法?在 css 中有没有办法只显示前 3 个 .row 然后隐藏所有其他 .row

谢谢。

【问题讨论】:

我会用 JS 来做这个。 【参考方案1】:

    您有一个 .notarow 作为第一个孩子,因此您必须在 :nth-child() 公式中考虑这一点。因为那个.notarow,你的第一个.row成为了父母的第二个孩子,所以你必须从第二个开始数到第四个:

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

    Updated fiddle

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

    你做的很好。

【讨论】:

感谢您对 BoltClock 的非常清晰的解释。我认为 (-n+3) 会选择前 3 个 .row 之前的任何元素。 您是否还知道我想做的事情是否还有最佳实践?隐藏所有内容然后显示前 3 个元素 => 是否有更好的方法仅在 css 中显示前 N 个元素?谢谢 似乎没有更好的方法。像这样使用:nth-child() 就可以了,只要您适应实际结构并且足够可预测。 这里的减号 (-) 有什么作用? @tmyie:它翻转 n 以便从 0 开始倒数,所以你得到 0+4, -1+4, -2+4, -3+4... 导致第 4、3、2 和 1 个孩子。【参考方案2】:

你甚至不需要 CSS3 选择器:

.row + .row + .row + .row 
    display: none;

这在 IE7 中也应该可以工作。Updated fiddle

【讨论】:

【参考方案3】:

另外,像 Giovanni 的解决方案一样,这样的方法也可以工作。

.container > .row:nth-child(3) ~ .row 
    /* this rule targets the rows after the 3rd .row */
    display: none;

【讨论】:

【参考方案4】:

我通过谷歌搜索“css show first n elements”找到了这个答案,但现在的问题似乎是相反的(隐藏前 n 个元素)

:nth-child(n+4)

^ 如果您正在寻找我正在寻找的东西,这将起作用

【讨论】:

以上是关于如何在css中显示块的前N个元素并隐藏其他元素?的主要内容,如果未能解决你的问题,请参考以下文章

css如何避免绝对定位覆盖其他元素?

CSS中如何让元素隐藏?

*CSS:各种居中总结

如何在 HTML 文件 (DOM) 中选择和隐藏除前 5 个元素之外的所有元素

hive sql - 如何选择 hive 数组列中的前 n 个元素并返回所选数组

css如何选择相邻的前一个元素?