CSS选择器

目录

        基本选择器有8种：

        伪元素选择器：

        伪类选择器

            1、结构性伪类选择器

            2、UI状态伪类选择器

            3、其他伪类选择器

    css选择器优先级规则

---

css选择器分为三大类：基本选择器，伪元素选择器，伪类选择器，语法selector{}

        基本选择器有8种：

            1、元素选择器        E{}                       特例    ： *{} 代表所有元素

            2、属性选择器        E[attr=value]{}     ^= 前缀     $= 后缀  *=  包含  = 等于

            3、class选择器       .class值{}            元素选择器跟class选择器结合使用就是完整的属性选择器    div.boy == div[class=boy]{}

            4、id选择器             #id值{}                元素选择器跟id选择器结合使用就是完整的属性选择器        div#boy == div[id=boy]{}

            5、包含选择器         selector1 selector2 ...{}

            6、子选择器             selector1>selector2>...{}

            7、兄弟（同父级元素）选择器        selector1~selector2        只找弟弟，不找哥哥

            8、选择器组合          selector1，selector2，...{}

        伪元素选择器：

            1、::first-letter        首字符                  前提 ：依赖元素必须是块级元素

            2、::first-line          首行                      前提 ：依赖元素必须是块级元素

            3、::after               元素内容后面        前提 ：必须使用content属性，没有内容也空着

            4、::before            元素内容前面        前提 ：必须使用content属性，没有内容也空着

        伪类选择器

            1、结构性伪类选择器

                :nth-child(n)        n从1开始，代表位置；放预定词  odd(奇数)  even(偶数)；放表达式，n从0开始                                                       侧重点是位置

                :nth-last-child(n)        n从1开始，代表位置；放预定词  odd(奇数)  even(偶数)；放表达式，n从0开始                                              侧重点是位置

                :first-child            第一个              侧重点是位置

                :last-child            最后一个           侧重点是位置

                :nth-of-type(n)    n从1开始，代表位置；放预定词  odd(奇数)  even(偶数)；放表达式，n从0开始                                              侧重点是类型

                :nth-last-of-type(n)    n从1开始，代表位置；放预定词  odd(奇数)  even(偶数)；放表达式，n从0开始                                              侧重点是类型

                :first-of-type        第一个              侧重点是类型

                :last-of-type        最后一个           侧重点是类型

            2、UI状态伪类选择器

                悬停状态                  :hover

                焦点状态                  :focus

                通过校验状态           :valid

                选中状态                  :checked

            3、其他伪类选择器

                排除伪类选择器        :not()

    css选择器优先级规则

        规则1：id选择器 > class选择器 > 元素选择器

        规则2：选择器写的越长（越准确），优先级越高

        规则3：相同选择器类型相同长度下，后面的代码覆盖前面的代码

---