如何使用纯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>
示例:
{{1}}
这是否可以使用CSS - 没有javascript或jQuery?
答案 0 :(得分:52)
纯CSS 可以实现这一点。不需要javascript。
使用nth-child selector。 1
section > div:nth-child(3n+1) {
background:red;
}
其中'1'是样式开始的位置,3表示它应该为每个第三个元素设置样式。它解释得更好here。
1 注意 - 正如其他人提到的那样,这是IE8及其中的not fully supported。
答案 1 :(得分: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 }
此模式可以使用大多数CSS预编译器生成(即SASS),但受到您希望拥有的元素数量的限制。
<强>结论强>
如果您正在寻找的是IE支持;那么我强烈建议你使用像Selectivzr这样的库。这将使你免受一些IE6-8的麻烦。
如果我有任何关于更好解决方案的顿悟,我会发布。
答案 2 :(得分: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) {
}
答案 3 :(得分:4)
需要更改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或以下默认情况下不可用”,如that is incorrect),这可以通过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;
}
我提供了上述答案,只是为了表明如果你真的想要你想说的话你必须做些什么。如果是我,除非在每个第三个元素上更改样式绝对至关重要(因此javascript关闭对整个方案来说是致命的;甚至可以解决非javascript的restyle),我会使用JoshC作为你的CSS的答案,然后使用某种形式的javascript解决方案使其向后兼容(如Indy所说,或任何其他形式的JavaScript解决方案)。
答案 4 :(得分:2)
你可以使用
.my-class:nth-child(odd) {}
或
.my-class:nth-child(2n+1) {}
答案 5 :(得分:2)
section > div:nth-child(3n+1) {
background:red;
}
此样式有助于解决您的问题,但'&gt;'旧版浏览器不支持此符号,例如:IE5,IE6,IE7。 。
但我更喜欢这种方式,没有'&gt;'符号
section div:nth-child(3n+1) {
background:red;
}
答案 6 :(得分:1)
可能的解决方案是
section div:nth-child(3n+1) {
color: #ccc;
}
以上代码根据请求从第一个元素开始每隔3个元素设置样式 更改'+ sign'后的数字以设置起始元素 更改 n charecter 之前的数字,以设置要设置样式的元素
答案 7 :(得分:0)
使用纯css,这很容易做到。您可以定义CSS Selector并更改所需的子属性。对于您的情况,下面的内容是合适的。
section > div:nth-child(3n+1) {
background: green;
}
这是如何工作的。
Pseudo-elements and pseudo-classes
上面的工作如下
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
...........
如果你想要每个第3个元素,那么你的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
...........