21

如何使用纯 CSS 设置每三个元素的样式。

我见过这样的问题，但它们涉及 javascript。我想要一个简单的 CSS 解决方案。我知道我可以使用evenor oddwith: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？

4

8 回答 8

52

这对于纯 CSS是可能的。不需要javascript。

使用第n 个子选择器。1

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

其中“1”是样式开始的地方，3 表示它应该每隔三个元素设置样式。在这里解释得更好。

jsFiddle 演示在这里。

1注意 - 正如其他人所提到的，IE8 及以下版本并不完全支持这一点。

于 2013-09-17T22:15:56.637 回答
8

通过库支持 IE

如果您正在寻找 IE 支持，那么有一个名为Selectivzr的出色库可以在 IE 版本 6-8 上启用 CSS3 选择器。

对 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 的麻烦。

如果我对更好的解决方案有任何顿悟，我会发布。

于 2013-09-20T02:25:26.327 回答
4

纯 CSS，无 Javascript，支持 IE7/8

需要更改 HTML，或者...

无论是通过服务器端脚本计数动态地进行，还是通过硬编码手动进行，您都必须在 HTML 中要更改的元素上显式设置一些类。

演示小提琴

HTML

<section>
  <div class="someclass explicitClass"></div>
  <div id="someId"></div>
  <div class="someotherclass"></div>
  <div id="someotherId" class="explicitClass"></div>
  <div class="someclass"></div>
  <div id="someId"></div>
  <div class="someotherclass explicitClass"></div>   
</section>

CSS

.explicitClass {
    your-property-to-change: your-value-desired;
}

... 需要大量的 CSS 标记

或者您必须以庞大的方式为您生成“计数”的 CSS。正如 Indy 在他的回答中指出的那样（不知道为什么他说相邻的兄弟姐妹“默认情况下在 IE8 或更低版本中不可用”，因为这是不正确的），这可以通过 CSS 预处理器来处理，但即便如此，你真的不想要走这条路，除非您的元素数量非常有限，可能不超过您为示例发布的内容。如果有数百个元素，这是不切实际的。此解决方案不需要更改您的 HTML。

演示小提琴

CSS

section div:first-child,
section div:first-child + div + div + div,
section div:first-child + div + div + div + div + div + div {
    your-property-to-change: your-value-desired;
}

最终，我同意 JoshC 和 Indy

我提供上述答案只是为了说明如果你真的想要你所说的你必须做什么。如果是我，除非在每三个元素上更改这些样式是绝对重要的（因此关闭 javascript 对整个方案来说是致命的；甚至可以解决非 javascript 的重新样式），我会使用JoshC 的答案作为您的 CSS，然后使用某种形式的 javascript 解决方案使其向后兼容（如 Indy 所述，或任何其他形式的 javascript 解决方案）。

于 2013-09-21T13:30:49.200 回答
4 
section div:nth-child(3n+3) {  
    color: #ccc;
}

选定的元素：

(3xn)+3 :
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

你可以阅读如下：

（选择所有第三个元素）从 3 开始

在这里，您拥有DEMO所需的一切

http://css-tricks.com/examples/nth-child-tester/

在这里阅读更多 http://css-tricks.com/useful-nth-child-recipies/

http://css-tricks.com/how-nth-child-works/

仅选择奇数或偶数：

section div:nth-child(odd) {

}

section div:nth-child(even) {

    }

只选择前五个

div:nth-child(-n+5) {

}
于 2013-09-20T02:14:18.587 回答
2

您可以使用

.my-class:nth-child(odd) {}

或者

.my-class:nth-child(2n+1) {}
于 2013-09-20T02:24:47.603 回答
2 
section > div:nth-child(3n+1) {
    background:red;
}

这种风格可以很好地解决您的问题，但是旧浏览器不支持“>”这个符号，例如：IE5、IE6、IE7。. .

但我更喜欢这种方式，没有'>'符号

section div:nth-child(3n+1) {
    background:red;
}
于 2013-09-22T13:22:31.783 回答
1

可能的解决方案是

section div:nth-child(3n+1) {  
    color: #ccc;
}

上面的代码根据请求从第一个元素开始设置每个第三个元素的样式。
更改“+号”后的数字以设置起始元素。
更改n 字符之前的数字以设置要设置样式的元素

于 2013-09-20T05:34:03.893 回答
0

使用纯 CSS 可以轻松完成。您可以定义CSS 选择器并更改所需的子属性。对于您的情况，以下是合适的。

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

这是如何工作的。

伪元素和伪类

上面的工作如下

if n = 0 then 3*0 + 1 = 1
if n = 1 then 3*1 + 1 = 4
if n = 2 then 3*2 + 1 = 7
if n = 3 then 3*3 + 1 = 10
...........

如果你想要每个第三个元素，那么你的 CSS 看起来像

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

上面的工作如下

if n = 0 then 3*0 + 3 = 3
if n = 1 then 3*1 + 3 = 6
if n = 2 then 3*2 + 3 = 9
if n = 3 then 3*3 + 3 = 12
...........
于 2013-12-06T12:41:50.463 回答