nth-of-type和nth-child的区别

---恢复内容开始---

nth-of-type这一类的选择器是针对同类型的子元素进行计算；

nth-child这一类的先择器是连同父元素中的所有子元素一起计算；

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*h2:nth-child(even){*/
           /*background: blue;*/
       /*}*/
      /*h2:nth-child(odd){*/
           /*background: aquamarine;*/
       /*}*/
        h2:nth-of-type(even){
            background: blue;
        }
       h2:nth-of-type(odd){
           background: yellowgreen;
       }
    </style>
</head>
<body>
<div>
    <h2> 标题1</h2>
    <p>内容 ......三万字</p>
    <h2>标题2</h2>
    <p>内容 ......三万字</p>
    <h2>标题3</h2>
    <p>内容 ......三万字</p>
    <h2>标题4</h2>
    <p>内容 ......三万字</p>
    <h2>标题5</h2>
    <p>内容 ......三万字</p>
    <h2>标题6</h2>
    <p>内容 ......三万字</p>
</div>
</body>
</html>

 

标题1

内容 ......三万字

标题2

内容 ......三万字

标题3

内容 ......三万字

标题4

内容 ......三万字

标题5

内容 ......三万字

标题6

内容 ......三万字

还有相似的有选择器nth-last-child和nth-last-of-type;

                          

posted @ 2016-11-11 14:26  ypm_wbg  阅读(155)  评论(0)  编辑  收藏  举报