Question

我想用其他背景设置li's样式。该模式应该变为红色＆gt;蓝色＆gt;红色＆gt;蓝色等。

问题是我使用:not选择器忽略一个列表中的第一行，因此该列表的模式从蓝色＆gt;开始。红色＆gt;蓝色。我理解为什么会这样，但我想知道是否可以让:nth-of-type() odd and even忽略计算中的行？或者如果有一个解决方法而没有在我的html中添加额外的标记。

http://jsbin.com/kusolecudo/edit?html,css,output

我不想对我的HTML应用任何额外的标记，也不想将我的CSS复制为：not list。

li:not(.head):nth-of-type(odd)
{ background: red }

li:not(.head):nth-of-type(even)
{background: blue }


ul {width:40%;display:inline-block;list-style:none}

<ul>
  <li class="head">
    test
  </li>
  <li>
    test
  </li>
  <li>
    test
  </li>
</ul>


<ul>
  <li>
    test
  </li>
  <li>
    test
  </li>
  <li>
    test
  </li>
</ul>

Answer 1

虽然根据:nth-of-type()的结果无法让:not()跳过，并且基本上假装它不存在，但您可以通过添加三个来实现您的意图使用general siblings选择器的更多定义。

CSS：

li:nth-of-type(odd)
{ background: red }

li:nth-of-type(even)
{background: blue }

li.head
{ background: none; }

li.head ~ li:nth-of-type(1n+2)
{ background:red; }

li.head ~ li:nth-of-type(2n+3)
{ background:blue; }

ul {width:40%;display:inline-block;list-style:none}

li.head ~ li将在li之后选择任何.head，然后您可以应用＆＃34;奇数＆＃34; /＆＃34;偶数＆＃34;带有偏移的样式：1n+2和2n+3。

这里有一个JSFiddle供参考：https://jsfiddle.net/rjschie/b538upum/

我希望有所帮助！

忽略行使用：not（）和样式与nth-of-type odd＆amp;甚至

1 个答案: