第 n 个子级 CSS 选择器

发布于 2024-12-01 14:38:31 字数 189 浏览 1 评论 0原文

我有九组配色方案，我想将它们应用于一系列 div。使用 :nth-child(1), :nth-child(2)... 适用于前九个，但我希望该序列在那之后重复，但我不能我的头围绕着 (3n+2) 符号......我想我明白了，但我似乎无法哄它做我想做的事。

这是可能的，还是我应该在写出它们时对每个 div 应用一个类？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倥絔 2024-12-08 14:38:31

如果您的意思是需要对每九个连续元素应用不同的规则，则必须使用这九个选择器：

:nth-child(9n+1)
:nth-child(9n+2)
:nth-child(9n+3)
:nth-child(9n+4)
:nth-child(9n+5)
:nth-child(9n+6)
:nth-child(9n+7)
:nth-child(9n+8)
:nth-child(9n+9) /* Or :nth-child(9n) */

If you mean you need to apply different rules to every nine consecutive elements, you have to use these nine selectors:

:nth-child(9n+1)
:nth-child(9n+2)
:nth-child(9n+3)
:nth-child(9n+4)
:nth-child(9n+5)
:nth-child(9n+6)
:nth-child(9n+7)
:nth-child(9n+8)
:nth-child(9n+9) /* Or :nth-child(9n) */

回复收藏 0 原文

浅浅 2024-12-08 14:38:31

首先是一些花絮：

nth-child 使用基于 1 的索引进行匹配（即 nth-child(1) 是第一个孩子，而不是第二个）
n An + B 表示法中的 是迭代器值
n，从 0 开始并向上计数
An + B code> 将是一个匹配的索引（我将其称为i)

阅读规范以获取更多信息

如果您有一组要匹配的元素，您应该将它们写出来：

示例：

1st, 10th, 19th, 28th...

在本例中，您希望将 n 与特定索引匹配

n | i
======
0 |  1
1 | 10
2 | 19
3 | 28
4 | 37
etc...

如果我们求解 An + B = i< /code> 使用 n = 0, i = 1 我们可以获得 B 的值：

A(0) + B = 1
B = 1

然后我们可以在第二次替换中使用该值，使用 n = 1、i = 10：

A(1) + 1 = 10;
A = 9;

所以我们现在有 9n + 1 选择器来匹配 1,10,19,28,etc

您可以对每个不同的选择进行冲洗和重复，但很快您应该意识到重复发生在每个 A 元素上，偏移量是 B 元素。

_{nth-child 选择器是一个很好的现实例子，说明高中代数实际上很有用}

First a few tidbits:

nth-child uses 1-based indices for matching (i.e. nth-child(1) is the first child, not the second)
n in the An + B notation is the iterator value
n starts at 0 and counts up
An + B will be a matched index (I'll call it i)

read the spec for more info

If you have a set of elements you want to match, you ought to write them out:

Example:

1st, 10th, 19th, 28th...

In this case you want to match n to specific indices

n | i
======
0 |  1
1 | 10
2 | 19
3 | 28
4 | 37
etc...

If we solve for An + B = i using n = 0, i = 1 we can get the value of B:

A(0) + B = 1
B = 1

We can then use this value in a second substitution using n = 1, i = 10:

A(1) + 1 = 10;
A = 9;

So we now have 9n + 1 for a selector to match 1,10,19,28,etc

You can rinse and repeat for each different selection, but pretty soon you ought to realize that the repetition happens every A elements, and the offset is B elements.

_{The nth-child selector is a great real-world example of where high-school algebra is actually useful}

回复收藏 0 原文

~没有更多了~