伪类选择器
结构伪类
nth-child-数字
p:nth-child(1){
color: red;
p:nth-child(3n+1){
color: red;
odd 奇数 2n+1
even 偶数 2n
取前五
p:nth-child(-n+5){
color: green;
取前三
p:nth-child(-n+3){
color: red;
交集选择器
交集选择器：
是一个p元素
同时作为子元素的第一个元素
p:nth-child(1){
color: red;
}
后代选择器
后代选择器：
选择p元素，但是后面是一个空格，选p的后代
选择后代的第一个子元素
p :nth-child(1){
color: green;
}
nth-of-type()
nth-of-type()用法和nth-child()类似
不同点
nth-of-type()计数时只计算同种类型的元素
nth-of-type(2)中变红的是只算p的个数中第二个p
文字内容1 是第一个p
文字内容2 是div中的第一个p
文字内容3 是div>div中的 第一个p
文字内容4 是第二个div中的第一个p（第二个标签，第一个是div）
文字内容5 是第二个div中的第二个p 所以文字内容5变红
文梓内容6 是第二个p元素 所以文字内容6变红
结构伪类的补充转换
1、:first-child,等同于 :nth-child(1)
2、:last-child, 等同于 :nth-last-child(1)
3、:first-of-type,等同于 :nth-of-type(1)
4、:last-of-type, 等同于 :nth-last-of-type(1)
5、:only-child , 是父元素中的唯一子元素
注：在使用only-child时候
我们希望在父元素中的唯一子元素变成红色
但是会出现所有元素都变成红色的情况
原因是因为在这个文档中 也是唯一的元素而没有兄弟元素
所以避免这种情况出现
我们可以使用 body :only-child
使他锁定在body中 而不会带上html
6、only-of-type， 是父元素中唯一的这种类型的子元素
7、root ， 根元素，就是HTML元素
:only-of-type
伪类root根目录
以下两种设置html 是一样的
html{
}
:root{
}
伪类empty
对p和最后一个div的空元素做高度背景色设置
否定伪类
:not()的格式是:not(x)
x是一个简单选择器 不可以放复杂的
可以是元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
伪元素
常见的伪元素
