5

我对 css 中的第 n 个子选择器很好奇。但是现在对我来说很难理解它的逻辑。下面给出的示例突出显示第一个和最后一个跨度。

<div>
<span>This span is limed!</span>
<span>This span is not. :(</span>
<em>This one is odd. </em>
<span>Sadly, this one is not...</span>
<span>But this one is!</span>
</div>
span:nth-child(2n+1) {
background-color: green;
}
4

4 回答 4

8

n代表一个自然数。意义,[0, 1, 2, 3, 4, 5, ...]

因此,在您的 CSS 中,2n+1意味着: 2*0+1(= 1)、2*1+1(= 3)、2*2+1(= 5)、2*3+1(= 7) 等等。

您的代码基本上选择了所有奇数的孩子。可以写得更短,即:

nth-child(odd)
于 2013-10-20T07:30:37.363 回答
4

对于 first 和 last,您可以使用span:first-childandspan:last-child选择器。

关于第 n 个孩子,它只是重复选择元素。 span:nth-child(2n+1)在示例中将选择 1、3、5 等...所有奇数跨度。

于 2013-10-20T07:30:22.560 回答
3

在您的具体示例中,它正在选择奇数元素,如下表所示。为什么要计算<em>?这是因为顾名思义,它正在搜索父母的孩子,<div>在这种情况下,<em>它是父母的第三个孩子,但因为它不是,<span>所以没有突出显示。

:nth-child可以使用公式、数字或某些关键字来选择n对象具有的索引所在的某些元素。简而言之,拥有遵循特定顺序或设计的自定义 CSS 选项是一个非常好的技巧,而无需拥有特殊的类并且在构建 HTML 时不必考虑。

即,当您可以只使用选择器时,您不希望为奇数和偶数成员提供特殊的 CSS 类:nth-child。想象一下,如果您正在编写一个表格并在另一行上着色,如果您有 CSS 类,那么在表格中间添加一些东西并更改之后行的 CSS 类以遵循奇数/偶数模式将会很麻烦。

关键词

:nth-child(奇数)
:nth-child(偶数)

示例公式(带有很棒的 ASCII 表)

作为描述,下表告诉您将选择的第 n 个元素。例如,当您使用公式时,2n+1将选择第 1、第 3、第 5、第 7、第 9、第 11、... 元素。

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 - - 3
1 3 5 8 4 3 2
2 5 9 12 8 8 1
3 7 13 16 12 13 -
4 9 17 20 16 18 -
5 11 21 24 20 23 -

资源

:nth-child 深入

有用的 :nth-child 食谱

一个不错的视觉测试仪

于 2013-10-20T07:49:51.530 回答
2

引用W3C

:nth-child(an+b)伪类表示法表示在文档树中具有兄弟姐妹的元素,an+b-1对于任何正整数或 0 值n,并且具有父元素。对于大于零的 a 和 b 的值,这有效地将元素的子元素分成 a 元素组(最后一组取余数),并选择每个组的第 b 个元素。例如,这允许选择器对表格中的每隔一行进行寻址,并且可以用于以四次循环交替段落文本的颜色。a 和 b 值必须是整数(正数、负数或零)。元素的第一个子元素的索引为 1。

那么,现在span:nth-child(2n+1)将代表每个奇数个元素的含义是什么,简单的解释,每个1加2,所以如果等式是(3n+2)这样的,它将像2、5、8等。其中2n+0OR2n只代表偶数。 ..

演示(奇数)span:nth-child(2n+1)

演示 2(偶数)span:nth-child(2n+0)span:nth-child(2n)


我们也有一个伪类,nth-of-type一般来说它只是相同的东西,但你可以把它当作一个更严格的选择器,它nth-child会选择任何类型的元素,其中nth-of-type将选择特定的元素

所以,假设你想定位第二个span元素,但你在 DOM 中的第二个元素不是spanbut p,所以如果你使用,选择器就会失败nth-child

演示

在哪里使用nth-of-type将选择你的第二个span并且会跳过p

演示 2

于 2013-10-20T07:36:50.843 回答