如何清理大量重复的“第N个类型”CSS选择器？
给定：一个简单的彩色高光数组，只在CSS中控制。
有没有办法，缩短下面的巨大的CSS代码块，同时保持相同的结果？
换句话说，当选择多个nth-of-type声明时，是否有一种方法可以消除代码中的重复性，只使用CSS？
//CSS
nav:hover mark:nth-of-type(01){background:linear-gradient(to left, transparent, rgb(192 0 192 / 1))}
nav:hover mark:nth-of-type(02){background:linear-gradient(to left, transparent, rgb(180 0 250 / 1))}
nav:hover mark:nth-of-type(03){background:linear-gradient(to left, transparent, rgb(220 0 250 / 1))}
nav:hover mark:nth-of-type(04){background:linear-gradient(to left, transparent, rgb(220 0 120 / 1))}
nav:hover mark:nth-of-type(05){background:linear-gradient(to left, transparent, rgb(210 0 130 / 1))}
nav:hover mark:nth-of-type(06){background:linear-gradient(to left, transparent, rgb(202 184 0 / 1))}
nav:hover mark:nth-of-type(07){background:linear-gradient(to left, transparent, rgb(230 196 0 / 1))}
nav:hover mark:nth-of-type(08){background:linear-gradient(to left, transparent, rgb(145 190 0 / 1))}
nav:hover mark:nth-of-type(09){background:linear-gradient(to left, transparent, rgb(135 182 0 / 1))}
nav:hover mark:nth-of-type(10){background:linear-gradient(to left, transparent, rgb(0 204 227 / 1))}
nav:hover mark:nth-of-type(11){background:linear-gradient(to left, transparent, rgb(0 187 253 / 1))}
nav:hover mark:nth-of-type(12){background:linear-gradient(to left, transparent, rgb(0 192 212 / 1))}
nav:hover mark:nth-of-type(13){background:linear-gradient(to left, transparent, rgb(0 167 255 / 1))}
nav:hover mark:nth-of-type(14){background:linear-gradient(to left, transparent, rgb(0 165 150 / 1))}
nav:hover mark:nth-of-type(15){background:linear-gradient(to left, transparent, rgb(12 156 23 / 1))}
nav:hover mark:nth-of-type(16){background:linear-gradient(to left, transparent, rgb(16 20 162 / 1))}
```
共有1个答案
对于纯CSS，您仍然需要相当多的重复，但使用CSS变量更易读：
nav mark:nth-of-type(01){--c: rgb(192 0 192 / 1)}
nav mark:nth-of-type(02){--c: rgb(180 0 250 / 1)}
nav mark:nth-of-type(03){--c: rgb(220 0 250 / 1)}
nav mark:nth-of-type(04){--c: rgb(220 0 120 / 1)}
nav mark:nth-of-type(05){--c: rgb(210 0 130 / 1)}
nav mark:nth-of-type(06){--c: rgb(202 184 0 / 1)}
nav mark:nth-of-type(07){--c: rgb(230 196 0 / 1)}
nav mark:nth-of-type(08){--c: rgb(145 190 0 / 1)}
nav mark:nth-of-type(09){--c: rgb(135 182 0 / 1)}
nav mark:nth-of-type(10){--c: rgb(0 204 227 / 1)}
nav mark:nth-of-type(11){--c: rgb(0 187 253 / 1)}
nav mark:nth-of-type(12){--c: rgb(0 192 212 / 1)}
nav mark:nth-of-type(13){--c: rgb(0 167 255 / 1)}
nav mark:nth-of-type(14){--c: rgb(0 165 150 / 1)}
nav mark:nth-of-type(15){--c: rgb(12 156 23 / 1)}
nav mark:nth-of-type(16){--c: rgb(16 20 162 / 1)}
nav:hover mark:nth-of-type(n){background:linear-gradient(to left, transparent, var(--c))}
-
问题内容： 以下是我的HTML页面的摘要： 在这里我想选择id =’platinum’的第三个td元素 我试过的是。 和 两者对于如何选择第三个td都不起作用 问题答案： 有一个没有ID 的空值，这会干扰计数。选择器的意思是“第n个元素”，而不是“第n个元素”。因此，具有该ID 的第三个实际上是整个行中的第四个。 使用CSS选择器无法选择具有特定ID 的第三个元素。您应该改用XPath：
-
问题内容： 我正在尝试使用By.cssSelector来捕获类c3的第n个dom元素，其结构如下： 测试我的CSS选择器时，我变得越来越困惑。此选择器正确选择c2 / c3的第二个实例： 而： 什么都不选。 更糟糕的是，将其转换为硒，我似乎始终没有为所有3个版本找到任何东西。有很多选择这些元素的替代方法（我可能只做XPATH），但是我对nth-of- type的缺乏了解使我发疯。谁能提供关于第二个
-
问题内容： 我正在尝试使用By.cssSelector来捕获类c3的第n个dom元素，其结构如下： 测试我的CSS选择器时，我变得越来越困惑。此选择器正确选择c2 / c3的第二个实例： 而： 什么都不选。 更糟糕的是，将其翻译成selenium，我似乎始终没有为所有3个版本找到任何东西。有很多选择这些元素的替代方法（我可能只做XPATH），但是我对nth-of- type的缺乏了解使我发疯。谁能
-
问题内容： 如何调整以下CSS选择器： 所以它适用于TD列2-4？ 问题答案： 您将无法一次完成此操作-您将需要链接至少一个其他此类伪类。例如，的组合和（该位装置开始从第二子分别计数向前和向后）： 或者，不使用公式，只需排除和：
-
问题内容： 如何在特定的文本行上选择和应用样式？类似于CSS伪元素：first-line，但是我想选择任何一行，但不仅限于第一行。 似乎不能仅使用CSS来完成…总之，我不介意JS解决方案。 更新： 好吧，实际上这只是出于兴趣。我正在尝试实现诸如突出显示段落的每个偶数行（以提高可读性，就像每个人对表行所做的事情一样）… 预格式化文本，例如： …对我来说还可以，但是如何知道在哪里拆分呢？即使给出段落的
-
问题内容： 我有一堆带有类名的元素，但是我似乎无法使用以下CSS规则选择第一个元素： 该选择器有什么问题，我该如何纠正？ 多亏了这些评论，我才知道该元素必须是其父元素的第一个子元素才能被选中，而事实并非如此。我具有以下结构，并且该规则失败，如注释中所述： 我该如何针对上课的第一个孩子？ 问题答案： 这是作者误解工作方式的最著名例子之一。在CSS2介绍，该伪类表示其父的第一个孩子。而已。有一个非常普