属性选择器、伪类选择器、层级选择器

渐进增强：（作用范围：从小到大）
先保证最基本的功能 > 用户体验提升

优雅降级：（作用范围：从大到小）
先针对版本较高的设备进行项目构建，保证用户体验的完美
牺牲一些效果，保证最基本的功能

选择器（选择符）：
id class 类型（div span） 后代选择器 伪类选择器 伪元素选择…

属性选择器：
    e[attr]{}  选中e元素，且e元素有attr属性，
    e[attr="value"] 选中e元素，且e元素有attr属性，值为value
    e[attr~="value"] 选中e元素，且e元素有attr属性，包含值value
    e[attr^="value"] 选中e元素，且e元素有attr属性，以value值开头
    e[attr$="value"] 选中e元素，且e元素有attr属性，以value值结尾
    e[attr*="value"] 选中e元素，且e元素有attr属性，包含value值（可以截取只要是连接起来是完整的value）
    e[attr=|"value"] 选中e元素，且e元素有attr属性，仅有value值，或者以value-开头


伪类选择器：
    结构性伪类选择器：
    :first-child {} 选中第一个元素
    :last-child {} 选中最后一个元素
    :nth-child(n) {} n是从零开始的;该选择器选取父元素的第n个子元素，不论元素的类型
        2n  偶数列  even
        2n-1 奇数列 odd

    :only-child{}  选中只有一个子元素的标签 （没有其他同级元素，但只有一个a标签）
    :nth-last-child（n）倒数第n个元素

    ：first-of-type{} 指定类型的第一个元素
    ：last-of-type{} 指定类型的最后一个元素
    ：nth-of-type(n){} 指定类型的指定位置的元素
    ：nth-last-of-type(n){} 指定类型的指定位置的元素，倒着数
    
    :only-of-type{}指定类型中只有一个同一类型的元素（例：有很多同级元素，只有一个a标签）

    拓展：
        :root{}选中html （根元素）
        :empty{} 匹配没有任何子元素的元素X

:enabled{} 选中可以输入的元素
:disabled{} 选中不可以输入的元素
:checked{} 选中 被选中的元素 例：input：checked{width：200px}
::selection{} 被用户选中的内容处于高亮的状态

动态类型选择器：
    链接伪类选择器
        :link{} 初始状态
        :visited{} 访问过后状态
    用户行为选择器
        :hover{} 鼠标移入状态
        :active{} 鼠标按下时状态
        :focus{} 选中了获取焦点（获取光标）的元素

层级选择器：
    p > a 选中p标签下的子标签a

    p + a 选中p标签后的第一个兄弟a标签(只能选中一个)

    p ~ a 选中p标签后的所有a标签（可以选中多个兄弟元素）