一.css选择器
使用css选择器基本流程：
1.制作所需的选择器，并在其中写入样式。
2.将选择器绑定到指定的HTML标签上。
1）class选择器
class选择器 ：用 . 来标示自身， 自定义名称(名字符合见名知意即可)。具有重用性，可以给多个标签使用。 使用时 ，使用给对应的标签进行绑定 例如 < div class=".box">< /div > 。 class 的优先级 高于 标签选择器。
命名时： 可以包含字母数字下划线，但是不能以数字开头。
实例
.box{
width: 500px;
color: red;
}
2）id选择器
id选择器：用**#**来标示，自定义名称(名字符合见名知意即可)， id选择器不具有重用性， 具有唯一性。如果多个标签同时使用，会造成不可预知的错误。 id选择器要比class选择器的高。
命名时： 可以包含字母数字下划线，但是不能以数字开头。
实例
#div1{
width: 100px;
height: 100px;
background-color: pink;
font-size: 30px;
}
3）群组选择器
群组选择器：只能用于大批量的样式，如果需要给个别标签去写样式，使用Class或id。
实例
p,span,div,li{
color: blue;
}
4）子代选择器
子代选择器：**>**前是指定的父级，
> 后是指定的子级。
子代选择器，只对指定的父级，向下一层寻找目标。
实例
.list2>li{
color: red;
}
5）后代选择器
后代选择器：空格前是指定的父级，
空格 后是指定的子级。
后代选择器，对指定的父级下所有的层级，寻找目标。
实例
.list2 li{
color: #ccc;
}
6）标签选择器
标签选择器: 用标签名来定义的。作用, 当前页面中，所有叫这个名字的标签，全部都绑定上样式。
实例
div{
width: 200px;
height: 200px;
background-color: yellow;
}
7）通用选择器
通用选择器：它的优先级是最低的，慎用，因为它会修改整个页面中，所有标签的样式。包括body,html。 在大型网站中，这个选择器是被禁止使用的，样式容易混乱。
实例
* {
/*边框： 宽度 样式 颜色*/
border: 2px solid black;
background-color: green;
list-style: none;
}
css样式存在继承性：
1.父级的样式继承给子级。
2.如果子级不需要，单独调整子级即可。
二.hover伪类
hover: 鼠标伪类 ，冒号（:）后面的hover 是固定的写法,冒号（:）前面是要添加hover伪类的 目标 (目标尽量不要写成标签选择器)，指定的目标： 最好是单一的。
作用： 鼠标移入移出的时候触发指定样式
鼠标移入时； 触发 hover的样式
鼠标移出时： 回到 初始样式。 整个hover中的代码，都不会被加载
使用hover伪类时，将 子代(后代)选择器 写在hover之后会表示：
：前面是触发者
hover之后的是 显示者
实例
.box{
width: 200px;
height: 200px;
background-color: red;
/*边框*/
border: 2px solid black;
/*过渡：当样式发生改变的样式
值1： 所有的属性
值2： 改变所用的时间 单位 s 秒
*/
transition: all 2s;
}
.box:hover>p{
width: 500px;
border-radius: 20%;
background-color: yellow;
}
