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

Question

我必须为要使用 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 的样式。我使用的 CSS 是

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

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

在这里，span 正在设置样式。请帮我。我只想设置 div 的样式，以便交替行的颜色一致。我希望有人能帮助我。谢谢:)

Answer 1

删除 div 和 nth-of-type 之间的空格，如下所示:

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

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

这样它实际上指的是 div，而不是 div 的子元素。