嵌套元素上的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个类型，但可以使用类选择器：

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>