详解CSS选择符之子代选择符

后代选择符用于选取一个标签的所有后代，包括子代和孙辈等；而子代选择符只选取指定父辈的子代标签（指定标签元素的第一代子元素）。

子代选择符使用一个额外的符号（尖括号> ）表明两个元素之间的关系。

例如：body>h1 选取的是标签里的所有第一代标签。

HTML标签的关系图

HTML代码

body里面的h1标题


    div里面的h2
    

 div里面的p标签，p标签里面有一个加粗的链接
    


body里面的h2标题


    
列表1
 

     
小列表a
     
小列表b
     
小列表c
 
    
    

 列表2（带链接）
    
    

 列表3（带链接）
    

弄懂上面的结构之后，可以试试下面代码：

CSS代码

body>h2 {
    color: orange;
}

上面HTML代码里面，一共有2个标签，但只有一个子代的，另一个是在里面的，所以上面的CSS代码只作用在第一个标签。

下面是比较好玩的子选择符

:first-child

选取第一个子标签。

CSS代码

h2:first-child {
    color: orange;
}

这个选择符的作用是：先找到网页中所有标签，通过标签找到其父元素，再判断标签在其父元素中是否排第一个。

这里因为的第一个标签是，所以的子元素没被样式作用到。

因为里的是的第一个子元素，所以里的变成了橙色字。

:last-child

这个选择符与 :first-child 选择符的作用类似，不过选取的是一个元素的最后一个子代。

CSS代码

li:last-child {
    font-size: 2em;
}

可以看到，“小列表C”和“列表3（带链接）”的字号变大了。因为这两项都是被指定的最后一项。

:only-child

选取某个元素唯一的子代。

HTML代码

    
第一个div的p


    
第二个div的第一个p
    第二个div的第一个a

CSS代码

p:only-child {
    color: orange;
}

上述样式只作用在第一个的

元素。第二个里因为不止

元素，还有元素，所以第二个的

元素不会被上述样式影响。

这个选择符比较难理解。仅当指定的标签是另一个标签的唯一子代时，这个选择符定义的样式才有效。也就是说，子代中只有一个指定的标签还不行，如果指定的标签有其他同辈标签，这个选择符定义的样式就会失效。

:nth-child

这个选择符用法比较复杂，不过也特别有用。

这个选择符可以轻易地为表格中相隔的行、列表中相隔两个项目的项目或相隔其他数目的子代元素定义样式。

这个选择符需要一个值，用于确定选取哪些子代。

其中最简单的值是关键字，即odd和even。

1. odd用于选取奇数子代元素。
2. even用于选取偶数子代元素。

HTML代码

    
1
    
2
    
3
    
4
    
5
    
6
    
7

CSS代码

li:nth-child(odd) {
    background: pink;
}
li:nth-child(even) {
    background: teal;
}

第一个子元素的下标是 1。

需要注意的是，如果在第一个

    a
    
1
    
2
    
3
    
4
    
5
    
6
    
7