选择器的基础知识总结

1.层级选择器 （+ ~作用的是兄弟关系）

：子代选择器

   .box>li{
            border: 1px solid red;
        }

+： 当前元素的后面第一个兄弟

    .child+li{
            background-color: aquamarine;
        }

~：当前元素后面所有的兄弟元素

`     .child~li{
            background-color: yellow;
        }

2.属性选择器：
1.【】选择一个属性加样式
2.div[class] 选择div里面的class类加样式
3.div[class=box1] 选择div里面的class=box1的类加样式
注意=是完全匹配的 如果是两个名字的不可以，可以用包含~=

3.伪类结构选择器 ：
选择这元素兄弟的第一个：li:first-child
最后一个li:last-child
第n个： li:nth-child(n)
选择偶数： li:nth-child(2n) 或者将2n变成even
选择奇数: li:nth-child(2n+1)或者将2n+1变成odd
选择唯一的元素:div p:only-child{}
没有任何东西的 div:empty{} 空格也算东西
根选择器：root=html

4.动态伪类选择器
：link 被选择之后的样式
：visited 访问过之后的样式
：active 激活的时候的样式
：hover鼠标停留的时候的样式