nth-of-type奇数/偶数没有按预期工作[重复]

Posted 2023-03-06

【中文标题】nth-of-type奇数/偶数没有按预期工作[重复]

【英文标题】：nth-of-type odd / even not working as expected [duplicate]

【发布时间】：2017-02-06 23:47:48

【问题描述】：

如果我删除第一个 div，它会完美运行。

但是如果我有第一个没有类的 div，它就不能正常工作。

测试 1 应该是蓝色的，下一个测试应该是红色的，以此类推。

当我有另一个 div 时，它无法正常工作。我该如何解决这个问题？

.el:nth-of-type(odd) 
  background-color: blue;

.el:nth-of-type(even) 
  background-color: red;

<div id="content">
  <div>nothing</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
</div>

【问题讨论】：

***.com/questions/2717480/… 这个也可以回答你的问题

在顶部没有 el 类的情况下，您能否拥有可变数量的 div？

【参考方案1】：

在您的特定情况下，您可以简单地反转奇数和偶数类型的 CSS 规则（请参阅 sn-p）。 nth-of-type 指的是标签，即div元素，而不是类，因此也计算第一个没有类的 div。

由于您的 CSS 规则选择器将类与第 n 个类型组合在一起，因此第一个 div 不受影响，因为它没有类，但奇数或偶数的计数从第一个 div 开始。

.el:nth-of-type(odd) 
	background-color: red;


.el:nth-of-type(even) 
	background-color: blue;

<div id="content">
    <div>nothing</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    </div>

【参考方案2】：

我该如何解决这个问题？

将第一个 div 更改为另一个元素，这样它就会被 nth-of-type 跳过。

.el:nth-of-type(odd) 
  background-color: blue;

.el:nth-of-type(even) 
  background-color: red;

<div id="content">
  <span>nothing</span>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
</div>