使用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 /类。)
答案 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))
答案 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