问题，在第n个孩子奇/偶子元素

我有一个网站是这样的：问题，在第n个孩子奇/偶子元素

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="article_style.css" /> 
</head> 
<body> 
    <div class="section"> 
    <!--<h1>header</h1>--> 
     <div> 
      paragraph 
     </div> 
     <div> 
      paragraph 
     </div> 
     <div> 
      paragraph 
     </div> 
    </div> 
    <div class="section"> 
     <div> 
      paragraph 
     </div> 
     <div> 
      paragraph 
     </div> 
     <div> 
      paragraph 
     </div> 
    </div> 
</body> 
</html>

，这是CSS：

div.section 
{ 
    border: 1px solid black; 
} 
div.section div:nth-child(even) 
{ 
    color: Green; 
} 
div.section div:nth-child(odd) 
{ 
    color: Red; 
}

这是结果：

result

这是好的，因为我得到红色的奇数和绿色甚至在每个部分。但是，当我在首节begginig添加标题（注释示例代码中）我得到这样的：

result2

，我不希望出现这种情况。我想要像以前一样，但只是在第一部分有一个标题。所以首先标题然后是红色段落。

来源

2011-03-04 Mariusz Pawelski

使用nth-of-type代替：

Live Demo

div.section 
{ 
    border: 1px solid black; 
} 
div.section div:nth-of-type(even) 
{ 
    color: Green; 
} 
div.section div:nth-of-type(odd) 
{ 
    color: Red; 
}

来源

2011-03-04 15:05:33 thirtydot

谢谢，它的工作原理！但是，我不确定为什么任何人都会使用'nnth-child'，如果它不看类型。它有什么用处？ – 2011-03-04 15:22:06

@ CichyK24：经典的用例是[斑马条纹]（http://dev.opera.com/articles/view/zebra-striping-tables-with-css3/）表或列的行。 – thirtydot 2011-03-04 15:23:51

是的，但是它也不能用于“nth-type-type”吗？ – 2011-03-04 15:40:29

div > :nth-child(3)  the third child of a div element 
div > :nth-child(even) every even child of a div element 
div > :nth-child(odd) every odd child of a div element 
div > :nth-child(3n) every third child of a div element

来源

2013-04-03 16:47:35

问题，在第n个孩子奇/偶子元素

回答

相关问题