如何显示块的前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行不显示


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

感谢。

解决方案

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

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

   >更新小提琴




2. 您正在做什么。






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