Question

当使用CSS伪类时，我可以选择每个x个元素的数量而我不必手动定位....但是当使用3n + 1等式时，数字总是从1开始，如果我想要的话从2开始？

例如：

.abc(3n+1) {background: red;}

会选择1,4,7,10等等

但是如果我想跳过第一个并选择第二个，就像这样，2,4,7,10 ....

这是否存在等式？

Answer 1

我没有看到实现此目标的等式，但这种黑客应该有效。

.abc:nth-child(3n+1), .abc:nth-child(2) {background: red;}

.abc:first-child {background: green} /* say the original background for the first element was green*/

Answer 2

您可以使用not()选择器来阻止选择:first-child

.abc:nth-child(3n+1):not(:first-child),
.abc:nth-child(2) {
  background: red;
}

或者您可以通过覆盖将应用的样式重置为 first div：

.abc:first-child { /* default styles... */ }

<强> JSBin Demo

仅供澄清

CSS3 nth-child()或nth-of-type()选择器不适用于element.class的组合，它们会查找element本身。

考虑到这一点，您应该确保所有.abc元素都是兄弟。

或者通过名为.abc的包装器包装所有元素，然后选择element子元素，如下所示：

.abc element:nth-child(3n+1):not(:first-child),
.abc element:nth-child(2) {
  background: red;
}

Answer 3

您想要的选项不适合任何特定模式，因此您必须使用两个选择器。

但是，首先，您不能将第n个伪类应用于实际的class..only元素。

如果您的菜单包含10 li ...说

<ul>
  <li><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li><a href="">5</a></li>
  <li><a href="">6</a></li>
  <li><a href="">7</a></li>
  <li><a href="">8</a></li>
  <li><a href="">9</a></li>
  <li><a href="">10</a></li>
</ul>

然后你需要两个选择器

li:nth-child(3n+4),
li:nth-child(2) {
  background-color: red;
}

：nth-child（3n + 4）选择每隔一个开始第4项。

：nth-child（2）只是第二项

Codepen Demo

Answer 4

最简单的方式我认为更好

.abc li:nth-child(3n+4),.abc li:nth-child(2){//supposing abc to be class of ul and has li
    // what ever goes in here..
}

工作fiddle

CSS：n-child自定义方程式

4 个答案:

仅供澄清