CSS nth-child - 一次获得第1,第2,第4和第5个孩子?

时间:2011-03-01 20:34:18

标签: css css3 css-selectors

使用CSS3我知道我可以使用nth-child(an + b)选择器。我有一个5行的表,我想用一个语句选择第1行,第2行,第4行和第5行。这是可能的还是我必须使用至少两个这样的语句:

:nth-child(-n+2)  /* gets 1 and 2 */
:nth-child(n+4)   /* gets 4 and 5 */

我希望使用nth-child(1,2,4,5)nth-child(1-2,4-5)之类的语法,但它似乎不是规范的一部分。

(我无法控制页面,这些行上没有ID /类。)

3 个答案:

答案 0 :(得分:20)

如果你想要明确,唯一的方法就是像这样重复:nth-child()

tr:nth-child(1), tr:nth-child(2), tr:nth-child(4), tr:nth-child(5)

但是,由于该表恰好有5行,您可以排除第3行,您将获得#1,#2,#4和#5行:

tr:not(:nth-child(3))

jsFiddle preview

答案 1 :(得分:2)

您可以随时使用偶数和奇数关键字 像:

表tr:nth-​​child(偶数)或者如果你想要表数据使用表td:nth-​​child(odd)

答案 2 :(得分:1)

为了使它更通用,你可以使用它:

tr:not(:nth-child(1n+6)):not(:nth-child(3))  { 
    /* your rules here */
}

稍微解释一下: 你是说你要从6开始选择 的元素(所以前5个) 而不是 3,如果你写了

 tr:nth-child(1n+6) 

由于您选择了行

,因此您定位的是5开的行

(1 * 0)+ 6 [= 6]

(1 * 1)+ 6 [= 7]

(1 * 2)+ 6 [= 8]

......等等。这就是表达式(1n + X),其中X在我们的例子中是6.

在上面的表达式中添加:not pseudo selector,你要说你想从5开启选择 的行,所以你将从5中选择下来,第1,第2,第3,第4和第5。

另外,再添加一个:不是选择器,以第3个为目标,你会得到你想要的东西=>没有第3个的前5个!

/ *****************更新了!我添加了一个jsfiddle ******************* /

您可以在此处看到它jsfiddle