CSS三大属性、选择器和CSS动画
（一） CSS中的选择器
（二） CSS三大属性
（三） CSS动画
一、CSS中的选择器
- 后代选择器
元素1 元素2{ 样式声明 }
1、元素1和元素2中间用空格隔开
2、元素1是父级，元素2是子级，最终选择的是元素2（选中的是子级）
3、元素2只要是元素1的后代即可，即对元素2的子元素也起作用
4、元素1和2可以是任意基础选择器（不局限于标签选择器）
- 子选择器
元素1>元素2{样式声明}
1、元素1和2中间用大于号隔开
2、元素1是父级，元素2是子级，最终选择的是元素2
3、元素2是元素1的最近一级的子元素，即对元素2的子元素不起作用，只对元素2起作用
- 并集选择器
元素1,元素2{样式声明}
1、元素1和2中间用逗号隔开
2、任何形式的选择器都可以作为并集选择器的一部分
3、通常用于集体声明
- 链接伪类选择器
a:link //选择所有未被访问过的链接
a:visited //选择所有已被访问过的链接
a:hover //选择鼠标指针位于其上的链接，最常用
a:active //选择活动的链接（鼠标按下未弹起的链接）
为了确保生效，按照link visited hover active 的顺序声明
- focus伪类选择器
用于选取获得焦点的表单元素，一般情况类表单元素才能获取
input：focus {
background-color:yellow;
}
- 伪元素选择器
元素::before {
content:"";
}//插入元素内部的前面
1、before和after创建一个元素，但属于行内元素
2、新创建的元素在文档中是找不到的，所以称为伪元素
3、before和after必须有content属性
4、伪元素选择器的权重是1
- 属性选择器 权重为10 即 (0,0,1,0)
<style>
input[value] {
color:red;
}//选中1
input[type=password] {
color:blue;
}//选中3
div[class^=icon] {
color:green;
}//选择的是div然后有class属性，并且属性值是icon开头
div[class$=date] {
color:gray;
}//选中以date结尾的
</style>
<body>
<input type="text" value="请输入">//1
<input type="text">//2
<input type="password">//3
<div class="icon1">a</div>
<div class="icon2">b</div>
<div class="icon3">c</div>
<div>d</div>
<div class="icon1-date">x</div>
<div class="icon2-date">y</div>
<div class="icon3">z</div>
</body>
- 结构伪类选择器
<style>
ul li:first-child {
color:red;
}//选中1
ul li:last-child {
color:green;
}//选中6
ul li:nth-child(3) {
color:gray;
}//选中第3个
ul li:nth-child(even) {
color:skyblue;
}//选中偶数项，如果括号里是n，则选中所有元素
//如果是3n，则选中的是第3，6个
//n+5是从第5个到最后
//-n+5是选中前5个
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
二、CSS三大属性
1、层叠性
相同的选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式
- 样式冲突时，遵循就近原则（后来者居上）
- 样式不冲突时，不会层叠
2、继承性
子标签会继承父标签的某些样式，如文本颜色和字号
text-,font-,line-这些元素开头的属性（字体、文字相关）可以继承，以及color属性
补充：行高的继承
body{
font:12px/1.5 'Microsoft YaHei';
}
div{
font-size:14px;//子元素继承了父元素body的行高的1.5，1.5就是当前元素文字大小的1.5倍
}
3、优先级
| 选择器 | 选择器权重 |
|---|---|
| 继承、通配符选择器* | 0,0,0,0 |
| 元素（div等）选择器 | 0,0,0,1 |
| 类选择器和伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important | 无穷大 |
注意点：
- 权重是有四组数字组成的，不会有进位
- 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器
- 等级判断是从左到右的，如果某一位数值相同，则判断下一位
- 继承的权重为0
- 复合选择器会进行权重叠加
三、CSS动画
- 过渡
一般配合:hover使用
transition:要过渡的属性 花费时间 运动曲线 何时开始;
1、属性即想要变化的css属性，如果所有属性都要变化过渡，写一个all即可
2、花费时间：单位是秒（不可省）
3、运动曲线：默认是ease（可以省）
4、何时开始：单位是秒，可以延迟，默认是0（可以省）
5、谁做过渡给谁加
- 2D转换之translate
1、不影响其他的元素
2、其中的百分比单位是相对于自身元素而言的
3、对行内标签没有效果
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
- 2D转换之rotate
transform:rotate(度数);
1、度数的单位是deg
2、角度为正时，顺时针；为负时，逆时针
3、默认的旋转中心是元素的中心点
- 设置旋转中心
transform-origin:x y;
1、参数是用空格隔开的
2、x y默认的中心点是元素的中心点（50% 50%）
3、可以给x y设置像素值或者是方位名词（top bottom left right center)
- 2D转换之scale
transform:scale(x,y);
1、其中x y是用逗号隔开的
2、transform；scale(2,2);宽和高都扩大为原来的两倍
3、如果只写一个参数，第二个参数和第一个参数的值是一样的
4、如果其中的值小于1，则表示缩小
5、优势:可以设置转换中心点缩放，默认以中心点进行缩放的，不影响其他的盒子
- 动画
先定义动画再使用动画
//定义动画
@keyframes 动画名称 {
0%{//相当于from
width:100px;
}
100%{//相当于to
width:200px;
}
}//可以设置多个状态
//调用动画
div {
animation-name:动画名称;//必须有
animation-duration:持续时间;//必须有
}
动画常见属性
@keyframes 定义动画
animation-name 动画的名称
animation-duration 动画完成一个周期所花的时间
animation-timing-function 规定动画的速度曲线
animation-delay 规定动画何时开始
animation-iteration-count 规定动画的播放次数
animation-play-state 规定动画是否正在运行或暂停
animation-fill-mode 规定动画结束后的状态 保持forwards回到起始backwards
animation 简写属性 animation-play-state除外
