Question

我想在嵌套的html结构中使用css odd和偶数。

第一个背景颜色应该是白色，下一个是黑色，下一个是白色，下一个是黑色，依此类推，直到达到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

Mate，我不相信你可以用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;
}

Answer 3

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>

所以在你的情况下，你不能使用nth-of-type但可以使用类选择器：

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>

Answer 4

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

css奇数甚至是嵌套元素

4 个答案: