：nth-child（）属性如何实际工作

-1

我对nnth-child（）属性的实际工作方式感到困惑，有时需要参数如：nth-child（2），第n个 - 儿童（2n），：第n孩子（2n + 1），他们的确切含义是关于偶数，奇数div还是其他任何财产。：nth-child（）属性如何实际工作

2015-12-17 Sravan

'第n个孩子（2）'只选择了第二个孩子，而'第n个孩子（2N）'选择每个偶数子（第二，第四，第六等）。同样，“第n个孩子（2n + 1）”每隔1，3，5，7等选择一次。我不会说这是一个糟糕的问题，但你应该真正阅读规格（或）在询问之前亲自尝试过，并且你会得到答案。 – Harry

你谷歌你的问题？ – Aaron

在这些事情上有很多文档，例如[MDN]（https：// developer）。mozilla.org/en-US/docs/Web/CSS/%3Anth-child）。 –

从链路A报价下面

使用式（AN + B）。说明：a表示周期大小，n是计数器（从0开始），b是偏移值。

在这里，我们为所有p元素，其索引 3的倍数背景色：

p:nth-child(3n+0) { background: #ff0000; }

因此，基本上，你可以使用一个号码，:nth-child(n)，选择n元素的第一个孩子。

然后你也可以用:nth-child(odd/even)来选择其他的孩子。

最后，您可以使用上面引用的公式。 3n将选择索引为3（2nd孩子）的每个孩子，所以5n将选择索引为5（4th孩子）的孩子等等。如果添加+1，则选择后面的每个元素。 +2将选择前面的每个元素2。这是一个抵消。

实施例：

:nth-child(5n+2) - 这将在每5th元件的前面选择的每一元件2：7

2015-12-17 11:35:21 Druzion

谢谢，但在：nth-child（5n + 2）为什么n从1开始而不是从0开始。它会是（5（0）+ 2）），这也可能给出2。 – Sravan

我的不好，它确实从0开始。我会更新答案。如果这回答了您的问题，请将其标记为已接受 – Druzion

的:nth-child()接受关键字奇/偶或表达作为参数，用最简单的可能的表达是一个数。

请参阅这篇文章CSS-tricks.com更详细的信息：https://css-tricks.com/how-nth-child-works/

2015-12-17 11:41:52 user7673225

：nth-​​child（）属性如何实际工作