問題描述

我有許多特定類 .box 的 div，我想為其設置交替的背景顏色.但是，有些 div 被放置在另一個 div .inner-container 中:

I have a number of divs of a particular class .box for which I want to set an alternating background color. However, some of the divs are placed inside another div .inner-container:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="inner-container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

因此，使用 nth-of-type(even) 或 nth-child(even) 每秒更改 .box 的顏色在這里不起作用.是否可以僅使用 CSS 來實現交替背景?

So using nth-of-type(even) or nth-child(even) to change the color for every second .box does not work here. Is it possible to achieve the alternating background anyhow with using CSS only?

注意:我不知道有多少盒子是 .container 的直接子級，以及 .inner-container 里面有多少.

Note: I dont know how many boxes will be direct children of .container and how many will be inside the .inner-container.

jsfiddle

推薦答案

我基本上需要一個選擇器來計算盒子，就好像它們都是同一個父級 .container 的直接子級一樣(就好像 .inner-container 不存在一樣).

I basically need a selector that counts the boxes as if they were all direct children of the same parent .container (as if the .inner-container would not exist).

假設只有一個內部容器——除了 .box 和 .inner-container 之外沒有其他元素——你需要使用 :內部容器上的 nth-child() 確定其相對于其 .box 兄弟(而不是其 .box 子級)的位置，從而確定是否以一種或另一種方式交替其內容的背景:

Assuming there will only be exactly one inner container — and no other elements besides .box and .inner-container — you'll need to use :nth-child() on the inner container to determine its position relative to its .box siblings (not its .box children), and thus determine whether to alternate the background on its contents one way or the other:

.container > .box:nth-child(even) {
    background-color: #bb3333;
}

.container > .inner-container:nth-child(odd) > .box:nth-child(even),
.container > .inner-container:nth-child(even) > .box:nth-child(odd) {
    background-color: #bb3333;
}

這里有一個demo，其中的方框已適當標記，以便您了解每個選擇器的工作原理.

Here's a demo with the boxes appropriately labeled so you can see how each selector works.

請注意，如果您有任何可能出現在內容器之后的框，您需要能夠計算內容器的子容器數量，然后才能確定如何開始計數從那時起.僅使用 CSS 是不可能的，因為 選擇器不能從內部元素上升到外部元素.有使用 JavaScript 的解決方法，但我懷疑這超出了當前問題的范圍.

Note that if you have any boxes that could appear after the inner container, you'll need to be able to count the number of children the inner container has before you can determine how to start counting from that point. This will not be possible with just CSS because selectors cannot ascend from inner elements to outer elements. There are workarounds using JavaScript, but I suspect this is outside the scope of the question at hand.

這篇關于帶有嵌套元素的 CSS nth-of-type 選擇器的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！