HTML5(H5)CSS选择器

css选择器

使用css选择器基本流程：

        1.制作所需的选择器，并在其中写入样式

        2.将选择器绑定到指定的html标签上

标签选择器：

        用标签名来定义

        作用：当前页面中，所有叫这个名字的标签，全部都绑定上样式

代码示例：

            div{

                    width： 200px；

                    height： 200px；

                    background-color：yellow；

             }

 class选择器：

            用 . 来表示自身

            自定义名称（名称符合见明之意即可）

            命名时：可以包含数字字母下划线，但是不能以数字开头，具有重用性，可以给多个标签使用

            使用时：使用给对应的标签进行绑定，例如

            class的优先级高于标签选择器

代码示例：

        .box{

                width: 500px;

                color: red;

        }

id选择器：

        用#来标示

        自定义名称(名字符合见名知意即可)

        命名时：可以包含字母数字下划线，但是不能以数字开头

        id选择器不具有重用性， 具有唯一性

        如果多个标签同时使用，会造成不可预知的错误

        id选择器要比class选择器的高

代码示例：

        #div1{

                    width: 100px;

                    height: 100px;

                    background-color: pink;

                    font-size: 30px;

         }

群组选择器：

        只能用于大批量的样式，如果需要给个别标签去写样式，使用Class或id

代码示例：

        p,span,div,li{

                                color: blue;

         }

子代选择器：

        >前 是指定的父级

        >后 是指定的子级

        子代选择器，只对指定的父级向下一层寻找目标

代码示例：

        .list2>li{

                    color: red;

          }

后代选择器：

        空格前是指定的父级

        空格后是指定的子级

        后代选择器，对指定的父级下所有的层级寻找目标

代码示例：

        .list2 li{

                    color: #ccc;

        }

特殊的选择器：

        交叉选择器

                两个条件必须同时满足，才可以绑定样式

                条件1:  p

                条件2:  .p1

                注意：两个条件之间没有特殊字符也没有空格，无缝连接

代码示例：

        p.p1{

                color: red;

        }

CSS样式存在继承性：

                1.父级的样式会继承给子级

                2.如果子级不需要，单独调整子级即可