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 ,注意字子节点不包含文本节点.