css 嵌套元素的奇数和偶数

Question

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

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

Answer 1

我认为 CSS nth 做不到。这不适用于嵌套元素，但仅适用于同一父元素内的元素。我这样做了，这是一个小的解决方法，但它有效。

Updated JsFiddle

Answer 2

伙计，我不相信你可以用 nth 选择器做到这一点，因为它是嵌套的。我建议你使用 class 并使其动态 (php/js) 如果你不确定巢有多深并过滤 class那里。

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;
}

Answer 3

您可以使用 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;
}

Answer 4

div:nth-of-type select或者，select兄弟姐妹，例如：

<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>

所以在你的情况下，你不能使用 nth-of-type 但可以使用 class select 或 :

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

css odd and even on nested elements

css

nested

selector