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奇數和偶數嵌套元素

回答

相關問題