如何显示一个块的前N个元素，并隐藏其他在css？ [英] How to show the first N elements of a block and hide the others in css?

问题描述

我试图隐藏块 .container 内有 .row / p>

我所做的是先隐藏所有 .row ，然后我试图显示前3个 .row 使用 .row：nth-​​child（-n + 3）

jsfiddle这里： http://jsfiddle.net/z8fMr/1/

这里有两个问题：

1. 第3行不显示，我使用nth-child


2. 有没有比隐藏所有内容更好的做法，然后创建一个特定的规则来显示我想要的n个第一个元素？在css中有一种方法只显示第一个3 .row ，然后隐藏所有其他 .row ？

感谢。

解决方案

1. 你有一个 .notarow 作为第一个孩子，所以你必须在你的：nth- child（）公式。因为 .notarow ，你的第一个 .row 成为了父的第二个孩子，所以你必须计数从第二个到第四个：

     .row：nth-​​child（-n + 4）{
    display ：块; 
   } 
     

   >更新小提琴




2. ol>
   

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

   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 here: http://jsfiddle.net/z8fMr/1/

   I have two problems here:

   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 ?

   Thanks.

   解决方案

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

      Updated fiddle

   2. What you're doing is fine.

   这篇关于如何显示一个块的前N个元素，并隐藏其他在css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！