css3学习day01-结构选择器

  E:�nth-child(n) ：表示 E 父元素中的第n 个子节点。

. p:nth-child(odd){background:red}   /* 匹配奇数行   */

. p:nth-child(even){background:red}   /* 匹配偶数行   */

. p:nth-child(2n){background:red}  

E:nth-last-child（n）:父元素中的第n个字节点，从后向前计算。

E:nth-of-type（n）:表示父元素中的第n 个字节点，且类型为 E。

找到什么类型的标签

E:nth-last-of-type（n）:表示父元素中的第n 个字节点，且类型为 E，从后向前计算。

E:empty 表示E 元素中没有字节点。（字节点包含文本节点）

注意这个空标签这个

p:empty{ background-color:#F00}

展示的样式为：

但是有的时候我们并不关心这个子元素是什么类型，所以又有另外的写法：

展示的信息：

E:first-child ==：nth-child(1)   表示E 元素中的第一个子节点

last-child ==:nth-last-child（1）表示E 元素中的最后一个子节点

E:first-of-type = nth-of-type（1）表示E 元素中的第一个子节点，且类型为 E.

E:last-of-type = nth-last-of-type（1）表示E 元素中的最后一个子节点，且类型为E.

E:only-child 表示 E 元素只有一个子节点，注意字子节点不包含文本节点。

E:only-of-type  表示 父级下，e元素中只有一个字节点，且这个字节点的类型必须为 E ,注意字子节点不包含文本节点.