使用:不是第一个孩子+因此每3个

Question

试图找出我如何根据位置攻击某些li.基本上,我需要NOT针对第一个孩子,然后每3个孩子.

例:

li1 (dont target) | li4(dont target)  | li7 (dont target)
li2 (target)      | li5 (target)      | li8 (target)
li3 (target)      | li6 (target)      | li9 (target)

这是我到目前为止所尝试的:

.siteMapSubList.threecolumn > li:not(:nth-child(1n+3))

类名是无关紧要的,以及我正在实现的css代码,所以我没有包含它.但是,这不起作用.如同,不针对我试图瞄准的那些.我真的试图避免有两个不同的规则(一个不是针对第一个孩子,然后是每个后面的3个)我认为我现在可以做.所以我真的想在一条规则中做到这一点,如果可能的话.

编辑

想确保人们更好地了解我的需求.所以基本上如果我们有9个li,我想不要目标1,4和7. 2,3,5,6,8,9我想要定位(这就是为什么我使用的是非运算符,但如果你有一个更好的方法,我都是耳朵).

Answer 1

你非常接近!你需要的选择器是li:not(:nth-child(3n+1)).

见下面的例子:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 6em;
}

li {
  height: 2em;
}

li:not(:nth-child(3n+1)) {
  color: red;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>