HTML中CSS引用——选择器的使用

一、元素选择器

    1、书写格式：标记名{/*生命块*/}

    2、所有与该标记匹配的元素，都将应用声明块中的规则

二、类选择器

    1、书写格式：.类名{/*声明块*/}

        类名为 class的值

    2、所有class属性为指定类名的元素，都将应用声明块中的规则

        eg:

<p class="color_blue size"> .color_blue{

color: skyblue;

}

.size{

font-size: 50px;

}

一个class标签可以写多个类名，放在class的值中，分隔符为空格

三、ID选择器

    1、书写格式：#id值{/*声明块*/}

    2、id选择器只会选择一个元素,属性id为指定值的元素，将应用声明块中的规则

    3、同一个html文档中，不同的id值不可重复。 即 元素中的id值必须唯一

四、通配符选择器

    1、书写格式：*{ }

    2、指页面内所有标签都适用的样式

    3、范围太广，不适用

五、属性选择器

    1、书写格式：input[type="text"]{ }

    【扩展】

        1、选种以xxx开头的元素

            书写格式 元素名[属性名^="属性名开头"]

            input[type^="t"]{}

        2、选种以xxx结尾的元素

            书写格式 元素名[属性名$=属性值结尾的内容]

            input[type$="d"]

        3、选中包含XXX的元素

            书写格式 元素名[属性名*=属性值包含的内容]

            input[type*="i"]

六、并集选择器/组合选择器

    1、书写格式：元素A+"，"+元素B+"，"+元素C

    2、适用于多个不同标签，应用相同的样式

    3、声明冲突需要计算层叠机制时，需将每一项分开单独计算

七、伪类选择器

    1、在html中不需要添加class属性，直接在CSS中书写

    【分类】

        1、动态伪类选择器

        将链接标签<a>设置样式，书写格式：标签：link{ }

（1）link和visited必须放在最前面（无先后顺序）

（2）link和visited只能用于<a>标签，属于静态伪类选择器

（3）link和visited后面是focus

                锁定，将自身的样式变化赋予指定的标签

                例：input：focus+span{corlor：deeppink}，鼠标选种input，则span标签的内容变成deeppink

（4）focus后面是hover

（5）hover后面是active

            通常情况下，我们会用到1245

                {记忆方法：网络通用——爱恨原则：love hate}

                     l v h a

        2、结构伪类选择器

            书写格式：元素：nth-child（n）{}

                eg：section>p:first-child{}

                解释：选种section下的第一个子元素，如果为p元素，则进行样式变化；若不是，则不变

            （1）要将奇数和偶数项分开添加样式

                    元素：nth-child（2n）

                        选偶数项元素

                            even

                    元素：nth-child（2n+1）

                        选种奇数项元素

                            odd

         （2）只选中前m个同样的元素

                    元素：nth-child（-n+m）

                    中间不能插入其他元素

             （3）选种A标签下的B元素中的第n个

                    A>B:nth-of-type(n){}

             （4）选种A标签下的B元素中的倒数第n个

                    A>B:nth-last-of-type(n){}

        3、否定伪类选择器

            选种除了第n个元素的其他同类元素

                元素：not（：nth-child(3)){}

七、伪元素选择器

    CSS创建的元素，都是选种元素的子元素

    分类

        元素：：before{}

            选种元素的第一个子元素

        元素：：after{}

            选种元素的最后一个子元素

        元素：：first-line{}

            选种元素的第一行

        元素：：first-letter{}

            选种元素的第一个字