风格每三个元素？

Question

如何使用纯CSS为每个第三个元素设置样式.

我见过这样的问题,但它们涉及到javascript.我想要一个简单的CSS解决方案.我知道我可以使用even或odd使用:nth-child但:nth-child(third)不能正常工作:nth-child(3)

例:

<section>
  <div class="someclass"></div>             STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        DON'T STYLE
  <div id="someotherId"></div>              STYLE
  <div class="someclass"></div>             DON'T STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        STYLE
</section>

这可能与CSS - 没有JavaScript或jQuery？

Answer 1

纯CSS可以实现这一点.不需要JavaScript.

使用nth-child选择器.¹

section > div:nth-child(3n+1) {
    background:red;
}

其中'1'是样式开始的地方,3表示它应该为每个第三个元素设置样式.这里解释得更好.

这里有jsFiddle演示.

¹ _{注意 - 正如其他人提到的那样,IE8并没有完全支持这一点.}

Answer 2

IE支持通过库

如果它是你正在寻找的IE支持,有一个很棒的库叫做Selectivzr,可以在IE版本6-8上启用CSS3选择器.

Hack没有帮助IE,但是没有使用:nth-​​child

否则所有我能提供的是使用+相邻兄弟选择器的丑陋黑客(由CSS2标准定义,但在IE8或更低版本中默认不可用)

div {
    width: 40px;
    height: 40px;
    background-color: blue;
}

div + div,
div + div + div + div + div { width: 100px }

div + div + div + div,
div + div + div + div + div + div + div { width: 40px }

的jsfiddle

这种模式可以使用大多数CSS预编译器(即SASS)生成,但受到您希望拥有的元素数量的限制.

结论

如果您正在寻找的只是IE支持; 那么我强烈建议使用像Selectivzr这样的库.这将为您带来一些IE6-8的麻烦.

如果我有一个更好的解决方案的顿悟,我会发布.