問(wèn)題描述
如何使用純 CSS 設(shè)置每三個(gè)元素的樣式.
How can I style every third element with plain CSS.
我見(jiàn)過(guò)這樣的問(wèn)題，但它們涉及到 javascript.我想要一個(gè)簡(jiǎn)單的 CSS 解決方案.我知道我可以將 even 或 odd 與 :nth-child 一起使用，但 :nth-child(third) 不能:nth-child(3)
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)
例子:
<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>
這可以通過(guò) CSS 實(shí)現(xiàn)嗎?沒(méi)有 javascript 或 jQuery?
Is this possible with CSS - no javascript or jQuery?
推薦答案
純 CSS 可以做到這一點(diǎn).無(wú)需 javascript.
This is possible with pure CSS. No javascript needed.
使用 nth-child 選擇器.1
section > div:nth-child(3n+1) {
background:red;
}
其中1"是樣式的開(kāi)始位置，3 表示應(yīng)該每隔三個(gè)元素設(shè)置樣式.這里解釋得更好.
Where '1' is where the style starts, and 3 indicates that it should style every third element. It is explained much better here.
jsFiddle 演示在這里.
1注意 - 正如其他人所提到的，這是 不完全支持 IE8 及以下版本.
這篇關(guān)于每隔三個(gè)元素設(shè)置樣式?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！