Question

如果删除第一个div，它的效果非常好。

但如果我没有班级的第一个div，它就无法正常工作。

测试1应为蓝色，下一个测试应为红色，依此类推。

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

＆＃13;

.el:nth-of-type(odd) {
  background-color: blue;
}
.el:nth-of-type(even) {
  background-color: red;
}

＆＃13;

<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>

＆＃13;

Answer 1

如何解决此问题？

将第一个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>

Answer 2

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

由于CSS规则选择器将类与nth-of-type组合在一起，因此第一个div不受影响，因为它没有类，但奇数或偶数的计数从第一个div开始。< / p>

.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>

nth-of-type odd /甚至没有按预期工作

2 个答案: