nth类型的奇数/偶数不按预期方式工作

如果我删除第一个div，它可以很好地工作。nth类型的奇数/偶数不按预期方式工作

但是，如果我有没有类的第一个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>

来源

2016-09-28 waisie li

http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107这其中也可能会回答你的问题 – Zim84

莫非你有一个可变数量的div，而顶部没有el类？ – j08691

我怎么解决这个问题呢？

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

来源

2016-09-28 20:25:56

你的具体情况，你可以简单地逆转为奇数和偶数第n-的类型（参见段）的CSS规则。 n-th-of-type引用标签，即div元素，而不是类，因此也计算没有类的第一个div。

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

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

 
.el:nth-of-type(even) { 
 
\t 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>

来源

2016-09-28 20:33:34 Johannes

nth类型的奇数/偶数不按预期方式工作

回答

相关问题