css奇数和偶数嵌套元素

https://jsfiddle.net/an5xvdvr/css奇数和偶数嵌套元素

我想在嵌套的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; 
}

深度可以是无限的，所以我需要一些适用于所有情况的魔法规则。

来源

2017-04-27 Jens Törnell

不能用纯CSS来实现除非你给嵌套div的类或为你将要拥有的最大嵌套数添加样式 – Pete

div:nth-of-type选择，选择的兄弟姐妹，例如：

<div>sibling1</div> 
<div>sibling2</div> 
<div>sibling3</div> 
<div>sibling4</div>

在你的代码的所有div首先chidren，让所有的人都奇怪，

如果我改变你的代码并将<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){ 
 
\t background-color: red; 
 
}

<div> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     Test 
 
     </div> 
 
     <div> 
 
     test2 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

所以你的情况，你不能使用第n-的类型，但可以使用类选择：

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>

来源

2017-04-27 10:14:25 Ehsan

我不认为你可以用CSS nth来做到这一点。这不适用于嵌套元素，但仅适用于同一父元素内的元素。我这样做，这是一个小的解决方法，但它的工作原理。

Updated JsFiddle

来源

2017-04-27 09:28:05 Sandwell

伴侣，我不相信你可以用nth选择这样做，因为它的嵌套。如果你不确定巢穴有多深，并且在那里过滤课程，我建议你使用课堂并让它动态地变为（php/js）。

Fiddle

HTML

<div class="bg-black"> 
    <div class="bg-white"> 
    <div class="bg-black"> 
     <div class="bg-white"> 
     Test 
     </div> 
    </div> 
    </div> 
</div>

CSS

div { 
    padding: 25px; 
    min-width: 100px; 
    min-height: 50px; 
    outline: 2px solid #333; 
} 

.bg-black { 
    background-color: black; 
} 

.bg-white { 
    background-color: white; 
}

来源

2017-04-27 09:31:37

可以使用添加一些类的jQuery：

HTML

<div class="first-container"> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     Test 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

jQuery的

$(".first-container div").filter(":even").addClass("odd");

CSS

.odd { 
 
    background: #eee; 
 
}

来源

2017-04-27 10:09:43

css奇数和偶数嵌套元素

回答

相关问题