样式每隔三个元素？ [英] Style every third element?

问题描述

我如何使用简单的CSS样式每个第三个元素。

我看到过这样的问题，但它们涉及到javascript。我想要一个简单的CSS解决方案。我知道我可以使用甚至或 odd 和：nth-​​child ：：nth-​​child（3） / p>



示例：

 < section& 
< div class =someclass>< / div> STYLE 
< div id =someId>< / div>不要STYLE 
< div class =someotherclass>< / div>不要STYLE 
< div id =someotherId>< / div> STYLE 
< div class =someclass>< / div>不要STYLE 
< div id =someId>< / div>不要STYLE 
< div class =someotherclass>< / div> STYLE 
< / section> 
  

这是否可能与CSS - 没有javascript或jQuery？

解决方案

这可以用纯CSS 。不需要JavaScript。

使用 第n个子选择器 。 ¹

 部分> div：nth-​​child（3n + 1）{
 background：red; 
} 
  

其中1是样式开始的位置，3表示风格每三个元素。您可以更好地 在此 解释此问题。 / p>

此处的jsFiddle演示 。

---

¹ _{注意 - 正如其他人所说，这是未完全受支持 。}

How can I style every third element with plain CSS.

I have seen questions like this, but they involve javascript. I want a plain CSS solution. I know I can use even or odd with :nth-child but :nth-child(third) doesn't work neither does :nth-child(3)

Example:

<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>

Is this possible with CSS - no javascript or jQuery?

解决方案

This is possible with pure CSS. No javascript needed.

Use the nth-child selector.¹

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

Where '1' is where the style starts, and 3 indicates that it should style every third element. It is explained much better here.

jsFiddle demo here.

---

¹_{Note - as other people have mentioned this is not fully supported by IE8 and down.}

这篇关于样式每隔三个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！