CSS div 交替颜色答案

【问题标题】：CSS div alternating colourCSS div 交替颜色
【发布时间】：2013-02-06 21:52:27
【问题描述】：

我正在尝试在我的网站中对我的 div 进行斑马条纹，听起来很简单，但是我发现当我在我的 div 的行之间添加一个标题时，它似乎计算了奇数/偶数样式中的标题

HTML

<div class="container">
    <h3>Title</h3>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <h3>Title</h3>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <h3>Title</h3>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <div class="row">Content</div>
</div>

CSS

.container {
    width:600px;
    margin:0 auto;
}

.row {
    line-height:24pt;
    border: solid 1px black;
}

.row:nth-child(odd) {
    background: #e0e0e0;
}

h3 {
    line-height:36pt;
    font-weight:bold;
    color:blue;
}

fiddle

我原以为已经在小提琴中的代码基本上会忽略标题并继续进行条带化，但似乎它认为标题是一个孩子

【问题讨论】：

标签： css html zebra-striping

【解决方案1】：

最简单的解决方案当然是只包装你想要条纹的元素。

Your updated jsFiddle.

HTML

<div class="container">
    <h3>Title</h3>
    <div class="zebra">
        <div class="row">Content</div>
        <div class="row">Content</div>
    </div>
    <h3>Title</h3>
    <div class="zebra">
        <div class="row">Content</div>
        <div class="row">Content</div>
        <div class="row">Content</div>
    </div>
    <h3>Title</h3>
    <div class="zebra">
        <div class="row">Content</div>
        <div class="row">Content</div>
        <div class="row">Content</div>
        <div class="row">Content</div>
    </div>
</div>

CSS

.row:nth-child(odd) {background: #e0e0e0;}

还要记住，如果 browser support 对您很重要，您可能需要为斑马条纹服务器端生成额外的类。

【讨论】：

如果他想添加更多或将其用于评论系统以便更容易看到单独的 cmets，这将是低效的......他想要的应该是动态的
没有理由不能动态化。
用容器包装元素并将css应用于该容器的类是低效的，而不是第n个子方法。
你到底在说什么？首先，您断言我的方法不是动态的，这是完全不正确的；现在你说我的方法效率较低。从技术上讲，这可能是真的，也可能不是，但无论如何，它的规模如此之小，以至于几乎完全不重要。
您是说手动包装所有其他集合，如果他想将其用于包含三个以上的东西并可能扩展它，则完全低效且不可能。我不明白你为什么不同意......

【解决方案2】：

不要使用nth-child，使用nth-of-type

div.container > div:nth-of-type(odd) {
    background: #e0e0e0;
}

.container {
  width: 600px;
  margin: 0 auto;
}

.row {
  line-height: 24pt;
  border: solid 1px black;
}

div.container>div:nth-of-type(odd) {
  background: #e0e0e0;
}

h3 {
  line-height: 36pt;
  font-weight: bold;
  color: blue;
}

<div class="container">
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
</div>

【讨论】：

请注意，这“继续”计数到标题；如果您想“重置”计数器（例如，标题后的第一行始终为白色），您需要使用 Jezen 的解决方案。
@j08691 我可以知道为什么最好使用 nth-of-type 而不是 nth-child 吗？只是好奇。
@Musikero31 因为在这个问题中，nth-child 将计算 div 和 h3 元素，因为它们都是父 div 容器的子元素。通过在选择器的 div 上使用 nth-of-type，您可以有效地过滤掉 h3 元素。

【解决方案3】：

您可能想要匹配类型，而不是子项。

使用:nth-of-type 比如

.row:nth-of-type(odd) {
    background: #e0e0e0;
}

【讨论】：