本文介绍了嵌套元素上的css奇数和偶数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
https://jsfiddle.net/an5xvdvr/
我要在嵌套的html结构上使用css奇数和偶数。
第一个背景颜色应该是白色，然后是黑色，然后是白色，然后是黑色，依此类推，直到达到Test。
html
<div>
<div>
<div>
<div>
Test
</div>
</div>
</div>
</div>
css
div {
padding: 25px;
background: #eee;
min-width: 100px;
min-height: 50px;
outline: 2px solid #333;
}
我尝试的
我尝试了一下，但没有成功：
div:nth-of-type(even) {
background: #eee;
}
深度可以是无限的，所以我需要一些适用于所有情况的神奇规则。
推荐答案
div:nth-of-type选择器，选择兄弟，例如：
<div>sibling1</div>
<div>sibling2</div>
<div>sibling3</div>
<div>sibling4</div>
在您的代码中，所有div都是第一个孩子，所以它们都很奇怪
如果我更改您的代码并将<div>test2</div>添加到您的代码中，则<div>test2</div>和<div>test</div>是同级的：
div {
padding: 25px;
background-color: #fff;
min-width: 100px;
min-height: 50px;
outline: 2px solid #333;
}
div:nth-of-type(even){
background-color: red;
}<div>
<div>
<div>
<div>
Test
</div>
<div>
test2
</div>
</div>
</div>
</div>因此，在您的情况下，您不能使用第n个类型，但可以使用类选择器：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">div {
padding: 25px;
background-color: #eee;
min-width: 100px;
min-height: 50px;
outline: 2px solid #333;
}
.even {
background-color:#fff;
}<div class="even">
<div>
<div class="even">
<div>
Test
</div>
</div>
</div>这篇关于嵌套元素上的css奇数和偶数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！