html 如何显示小于,html-CSS nth-child大于和小于

div.container:nth-child(n+3)在类上不起作用，它会查找元素本身。 您需要使用包装器将div.container div包装起来并使用以下命令：

.wrapper div:nth-child(n+3) {

/* put your styles here... */

}

工作演示。

在div.container:nth-child(n+3)上进行澄清

使用div.container:nth-child(n+3)可能有效，也可能无效。 因为div.container伪类表示n子元素与选择器匹配(在这种情况下为0)。

如果div.container:nth-child(n+3)元素不是其父元素的第n个子元素，则不会选择该元素。

从规格：

div.container:nth-child(n+3)伪类表示法表示一个元素   在文档树中具有div.container兄弟姐妹的兄弟姐妹，对于任何   正整数或零值n，并具有父元素。

考虑以下示例：

1st

2nd

3rd

4th

5th

6th

7th

8th

9th

在这种情况下，div.container:nth-child(n+3)将不会选择第二个div.container元素(其内容为n)。 因为该元素不是其父级的第二个子级，所以在父级的子级树中。

同样，div.container:nth-child(n+3)将选择所有div.container元素，因为n从0开始作为父级子代树中的第一个元素，而第div.container是其父级的第4个子代。

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element

n = 1: (1 + 3) = 4 => 4th element

n = 2: (2 + 3) = 5 => 5th element

...

因此div.container:nth-child(n+3)代表与div.container选择器匹配的所有第3，第4，第5个子元素。

在线演示。