[英]styling using :nth-of-type() in css3
I have to style a table like structure that is to be designed using divs and spans. 我必须设置一个类似于使用div和span设计的结构的表格。
<div id="parentdiv">
<div>
<span>abc</span>
<span>bcd</span>
<span>cde</span>
</div>
<div>
<span>123</span>
<span>234</span>
<span>456</span>
</div>
<div>
<span>mno</span>
<span>nop</span>
<span>pqr</span>
</div>
<div>
<span>678</span>
<span>789</span>
<span>890</span>
</div>
here i have to style the alternate divs with 2 colors. 在这里,我必须用两种颜色设计替代div。 css i used was
我使用的是
#parentdiv div :nth-of-type(2N)
{
background-color: #FFF;
}
#parentdiv div :nth-of-type(2N+1)
{
background-color: #f7f7f7;
}
here, spans are getting styled. 在这里,跨越风格。 please help me.
请帮我。 I want only divs to be styled so that alternate rows are colored accordigly.
我只想设置样式的div,以便交替的行按照颜色进行着色。 I hope somebody will help me.
我希望有人会帮助我。 thanks :)
谢谢 :)
Remove the space between div
and nth-of-type
like so: 删除
div
和nth-of-type
之间的空格,如下所示:
#parentdiv div:nth-of-type(2N)
{
background-color: #FFF;
}
#parentdiv div:nth-of-type(2N+1)
{
background-color: #f7f7f7;
}
This way it actually refers to the div
s, rather than children of the div
s. 这样它实际上是指
div
,而不是div
的子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.