css--One Day

上节说道 ：
前端的整体构成：由html 、css、javascript 构成。
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.如果子级不需要，单独调整子级即可