样式使用:css3中的nth-of-type()

时间:2012-09-08 16:17:22

标签: html css css3 css-selectors

我必须设置一个类似于使用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>

这里我必须用两种颜色设计替代div。 我使用的是

        #parentdiv div :nth-of-type(2N)
         {
         background-color: #FFF;
         }

        #parentdiv div :nth-of-type(2N+1)
         {
          background-color: #f7f7f7;
         }

在这里,跨越风格。 请帮我。 我只想设置样式的div,以便交替的行按照颜色进行着色。 我希望有人会帮助我。 谢谢:))

1 个答案:

答案 0 :(得分:2)

删除divnth-of-type之间的空格,如下所示:

    #parentdiv div:nth-of-type(2N)
     {
     background-color: #FFF;
     }

    #parentdiv div:nth-of-type(2N+1)
     {
      background-color: #f7f7f7;
     }

这种方式实际上是指div s,而不是div的子项。