目录
一、CSS3 新增选择器
1. 子级选择器
2. 兄弟选择器
相邻兄弟选择器
其他兄弟选择器
3. 结构伪类选择器
① E:first-child
② E:last-child
③ nth-child（n）
n为数字：
n为关键字：
n为公式：
④ E: firsh-of-type
⑤ E: last-of-type
⑥ E: nth-of-type(n)
⑦ E:nth-child(n) 和E:nth-of-type(n) 的区别
4. 伪元素选择器
h5 写法和传统写法区别
伪元素注意事项
E::before和E::after
E::first-letter 和 E::first-line
编辑 5. 属性选择器
①. E[att]
②. E[att="val"]
③. E[att^="val"]
④. E[att$="val"]
⑤. E[att*="val"]
6. 选择器权重
二、CSS3盒模型 box-sizing
content-box 标准模式（默认）
border-box 怪异模式
三、CSS3新增属性
1. 边框圆角 border-radius
基础写法
单一属性
简写方法
/ 的属性值写法
浏览器兼容
2. 文字阴影 text-shadow
语法
多层阴影
3. 盒子阴影 box-shadow
边框阴影
多层阴影
4. 过渡属性
动画效果
过渡属性
单一属性写法
① transition-property 过渡的属性
② 时间
③ transition-timing-function 时间曲线
示例
浏览器兼容
一、CSS3 新增选择器
CSS3 中，相对于 CSS2.1 版本的 7 个选择器（标签选择器，id选择器，类选择器，通配符选择器，后代选择器（ul li），交集选择器（id.class），并集选择器（a,b,c）），增加了更多其他的选择器，实现了更多的选择方式。
1. 子级选择器
子级选择器用于选取带有特定父元素的元素。
书写语法：element1 > element2
注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。
> 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。
示例：
现在有一个div，里面有两个p和一个div，inner里面还有一个p：
<body>
<div class="box">
<p>这是box中的p标签</p>
<p>这是box中的p标签</p>
<div class="inner">
<p>这是inner中的p标签</p>
</div>
</div>
<p>这是一个单独的p标签</p>
</body>用子级选择器选择box中的两个p：
<style>
.box>p{
background-color: pink;
}
</style> 
用子级选择器选择inner中的p：
<style>
.inner>p{
color: red;
}
</style>如果是之前学的后代选择器，会把box里面的所有p都选上，包括inner里面的p：
2. 兄弟选择器
兄弟选择器分两种：
相邻兄弟选择器
相邻兄弟选择器可以用于选择紧接在另一个元素后的一个兄弟元素，而且二者有相同的父元素。
书写语法：E1 + E2。
注意：
a）选中的是紧跟在 E1 之后的同级元素 E2。
b）只能选中紧跟在后面的一个 E2 元素。
c） 二者有相同的父元素。
d）+ 符号前后可以添加空格书写。
示例：
现在div box1中有一个二级标题和四个p标签：
<body>
<div class="box1">
<h2>二级标题</h2>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
</body>用兄弟选择器选择h2后面紧跟的那一个p：
<style>
.box1 h2 + p{
background-color: pink;
}
</style>
如果在 h2 后面加一个 div ，css 代码不变，这是哪个都不会变成粉色，因为 h2 后面紧接的不是p而是div，所以哪个都不会被选中：
值得注意的是，相邻兄弟选择器并不是只能选择一个，看这种情况：
这是因为，段落1是一个p，选中了段落2，所以段落2变成粉色；段落2选中后面紧邻的段落,3 ，段落3选中后面紧邻的段落4，所以后面三个段落都会变成粉色。
其他兄弟选择器
其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。
书写语法：element1~element2
注意：
a）选择 element1 之后出现的所有 element2，之前的不会被选中。
b）两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
c）~ 符号前后可以添加空格书写。
示例：
选择h2后面所有的p：
<style>
.box1 h2 ~ p{
background-color: pink;
}
</style>
3. 结构伪类选择器
之前学过伪类选择器，它是选择一种状态或者某个位置，结构伪类选择器是选中某一个结构的伪类选择器，较常用的有6种：
① E:first-child
首先看第一个： E:first-child，如果E不写就是匹配父元素中的第一个子元素，不论这个子元素是什么，如果写了 E，就是第一个子元素E：
但是如果是
<style>
.box1 p:first-child{
color: red;
}
</style>
</head>
<body>
<div class="box1">
<h2>二级标题</h2>
<div>111</div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
</body>哪个都不会被选中，因为box1中第一个子元素不是p而是h2。
所以一般使用 first-child的时候不写 E ，因为不写肯定会选中第一个，写了容易出错。
② E:last-child
类似于 E:first-child，选中父元素中的最后一个且最后一个元素必须是E
③ nth-child（n）
• 括号中的n 可以是数字，关键字和公式
•括号中的 n 如果是数字，就是选择第 n 个子元素
• 常见的关键词 even 偶数 odd 奇数
• 常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3.. 一直递增）
• 但是第 0 元素或者超出了元素的个数会被忽略
比较常见的一些公式：
n为数字：
<style>
/* 选中box1中的第3个子元素 */
.box1 :nth-child(3){
background-color: aquamarine;
}
/* 选中box1中的第三个子元素并且这个子元素是p */
.box1 p:nth-child(3){
background-color: aquamarine;
}
</style>n为关键字：
even 偶数个数的子元素 odd 奇数个数的子元素
<style>
/* 选中box1中的第奇数个子元素并且这个子元素是p */
.box1 p:nth-child(odd){
background-color: aquamarine;
}
</style>
n为公式：
<style>
/* 选中box1中的第0*3=,0,1*3=3，2*3=6...个子元素并且这个子元素是p */
.box1 p:nth-child(3n){
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1">
<h2>二级标题</h2>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
</body>
④ E: firsh-of-type
将满足是E类型的子元素重新划分为一个小组，在小组中排序，找第一个
<style>
/* 选中box1中的p类型的第一个子元素 */
.box1 p:first-of-type{
background-color: aquamarine;
}
</style>
⑤ E: last-of-type
<style>
/* 选中box1中的h2类型的最后一个子元素 */
.box1 h2:last-of-type{
background-color: aquamarine;
}
</style>
⑥ E: nth-of-type(n)
制定类型E中的第n个子元素。
⑦ E:nth-child(n) 和E:nth-of-type(n) 的区别
• E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。
• E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素。
4. 伪元素选择器
前面学过<a>标签的伪元素选择器，其实CSS3新增了很多伪元素选择器：
E::before 在E元素内部的前面插入一个元素， E::after在 E元素内部的后面插入一个元素
现在场景：
h5 写法和传统写法区别
• 1. 单冒号 E:before（传统）
• 2. 双冒号 E::before（h5）
• 浏览器对以上写法都能识别，双冒号是 h5 的语法规范。
伪元素注意事项
• 伪元素只能给双标签添加，不能给单标签添加（div是双标签，所以这里完全没有问题）
• 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
• 伪元素里面必须写上属性 content:"";
• before 和 after 创建一个元素，但是属于行内元素（宽度高度都是被内容撑起）。
如果想让它变成块元素可以设置 display: block; 然后就可以设置高度宽度了。
• 因为在 DOM 里面（JS）看不见刚才创建的元素，所以我们称为伪元素。
E::before和E::after
<style>
.box::before{
display: block;
width: 400px;
height: 50px;
content: "1";
background-color: pink;
}
.box::after{
display: block;
width: 400px;
height: 50px;
content: "2";
background-color: pink;
}
</style>
E::first-letter 和 E::first-line
这两个一般用来处理文字内容。
5. 属性选择器
属性选择器用来选择包含指定属性的标签。
①. E[att]
E[att] ：只要这个元素 E 设置过 att 这个属性那么就可以选中这个元素。
现在情景：两个单选框，两个复选框，两个按钮
如果这样写css：
<style>
input{
width: 100px;
height: 30px;
}
</style>那么这六个input标签都会被选中，包括两个单选框、复选框以及按钮
只想选中设置了 name 属性的两个单选框，那么就可以使用 E[att]：
<style>
input[name]{
width: 100px;
height: 30px;
}
</style>②. E[att="val"]
E[att="val"] ： E 元素设置了 att 属性且属性值等于 val 。
type属性这六个 input 标签都设置了，但我只选择设置了 type="checkbox" 的复选框：
<style>
input[type="checkbox"]{
width: 100px;
height: 30px;
}
</style>③. E[att^="val"]
E[att^="val"] ： E 元素设置了 att 这个属性并且属性值以 “val” 开头：
例如还是像上面例子一样选中复选框，不需要写 checkbox 写完整，以check开头就可以：
<style>
input[type^="check"]{
width: 100px;
height: 30px;
}
</style>还有一种情况：
这里单选框和复选框都设置了 class，并且属性值都是以 icon 开头：
④. E[att$="val"]
与E[^="val"]非常类似，只不过一个是以 val 开头，一个是以 val 结尾
class 属性的属性值以 dan 结尾的，选中两个单选框：
<style>
input[class$="dan"]{
width: 100px;
height: 30px;
}
</style>⑤. E[att*="val"]
属性值 val 不一定在开头也不一定在结尾，只要属性值中包含 val 这些字符，不管在任何位置，都可以。
例如，选出 type 的属性值中包含 o 这个字母的：（单选框、复选框、按钮）
<style>
input[type*="o"]{
width: 100px;
height: 30px;
}
</style>
6. 选择器权重
• 基础选择器：id 选择器 > 类选择器 > 标签选择器 > *
• 伪类选择器、属性选择器的权重等于类选择器 。
• 伪元素选择器的权重等于标签选择器 。
二、CSS3盒模型 box-sizing
盒模型就是用来设置与标签相关的一些位属性，比如宽、高、边框、内边距、外边距等。
在之前的学习中，我们知道，可以实体化的区域是 padding+border+宽高 区域，在CSS3中添加了一条属性 box-sizing 来专门指定盒模型：
CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。
content-box 保证盒子的书写区域不会变化，boeder-boc 保证边框及以内的区域不会变化。
content-box 标准模式（默认）
当不设置 box-sizing 属性时，默认是标准模式。
Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容区域是width 和 height 部分。
现在情景：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">文字内容</div>
</body>
当添加了 padding: 10px; ，这10px不会在盒子的宽高内部，而是会扩出来，盒子总体大小增大了，但是内容区域始终保持200*200的效果不变。
添加 border: 10px solid blue; 也是类似的，书写区域还是200*200，盒子扩大。
border-box 怪异模式
Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后，内容区域会收缩。
后期制作网页时，如果量出一个盒子总体宽高是固定的，padding和border都比较好测量，这时就无需手动计算内部内容区域的宽高，直接设置 box-sizing: border-box; 即可解决问题。
三、CSS3新增属性
CSS3新增属性：边框圆角、文字阴影、盒子阴影。
1. 边框圆角 border-radius
基础写法
• 属性名：border-radius
• 作用：设置边框的圆角，将元素的矩形效果改为圆角效果。
• 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比（不仅包含宽高，也包含padding 和 border，magin值不算）。
水平方向100px，垂直方向50px：
水平垂直方向都是50px：
如果想得到一个正圆，可以设置 border-radius 属性值为宽高的一半：
但是如果有padding 和 border ，那么也要考虑进来，设置为（width+padding+border）/ 2 ：
单一属性
• border-top-left-radius: 半径; 左上角圆角化
• border-top-right-radius: 半径; 右上角圆角化
• border-bottom-right-radius: 半径; 右下角圆角化
• border-bottom-left-radius: 半径; 左下角圆角化
注意都是上下方向先写（top bottom ），左右方向（left right ）后写。
例如只想让右下角圆角化：
简写方法
• border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
• 四值法 border-radius: 左上角 右上角 右下角 左下角; （顺时针方向）
•三值法 border-radius: 左上角 右上角和左下角 右下角 ; （顺时针方向）
•二值法 border-radius: 左上角和右下角 右上角和左下角 ;
• border-radius: 四个角相同;
/ 的属性值写法
斜线 / 比较特殊，需要好好理解 。
border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法（四值法 三值法 二值法 一值法都可），/ 后面可以设置垂直方向四种值的写法（同样四种写法都行）。
后续做一些圆的效果，一般使用百分比的写法，避免自己计算 。
浏览器兼容
Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。
2. 文字阴影 text-shadow
CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
元素内部加载坐标，（0,0）是原点，从这里开始加载，水平向右是 X 轴正方向，垂直向下是 Y 轴正方向：
语法
text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0。
虚化会更漂亮一些：
<style>
*{
margin: 0;
padding: 0;
}
.word {
margin: 50px;
font: bold 30px/60px "微软雅黑";
/* 文字阴影：水平位置 垂直位置 模糊程度 颜色 */
text-shadow: 3px 3px 5px red;
}
</style>
</head>
<body>
<p class="word">文字阴影效果</p>
</body>
多层阴影
多层阴影：比如一层阴影是绿色，一层阴影是红色，一层是红色.....
text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。
注意：多阴影中，先写的阴影压盖在后写的阴影上。
一般为了多层阴影能够显示出来，会使每层阴影的水平和垂直位置不同
<style>
.word {
margin: 50px;
font: bold 30px/60px "微软雅黑";
/* 多层阴影 逗号分隔*/
text-shadow: 3px 3px red,
6px 6px blue,
9px 9px green;
}
</style>
3. 盒子阴影 box-shadow
边框阴影
CSS3 中，box-shadow 属性用于对盒子边框添加阴影。
box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定，省略的长度是 0。
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
background-color: pink;
border: 5px solid blue;
/* 边框阴影：水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 */
box-shadow: 5px 5px 5px 4px green;
}
</style>
</head>
<body>
<div class="box"></div>>
</body>
多层阴影
box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。
注意：多阴影中，先写的阴影压盖在后写的阴影上。
4. 过渡属性
动画效果
CSS3 出现之前，前端一般使用 Flash 动画或 JavaScript 制作动画，这种歌制作的叫作帧动画，帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。
CSS3产生之后，使用过渡属性制作动画。而且做出来的会更好一些。
过渡属性
属性名：transition
作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看到这种过渡效果，我们使用 :hover 切换状态。
语法格式：
transition：过渡的属性 过渡时间 运动曲线 延时时间
具体来看：
单一属性写法
① transition-property 过渡的属性
• none 表示没有属性过渡，也就不会出现动画效果（默认值就是none）
• all 表示所有变化的属性都过渡
• 属性名 使用具体的属性名，多个属性名中间逗号分隔
② 时间
有两个时间，即第一第二个属性值
• 过渡时间：以s秒为单位。
• 延时时间：以s秒为单位。0s也必须加单位。（0的话不能只写0，必须写0s）
③ transition-timing-function 时间曲线
贝塞尔曲线
其实前面五个都是一些特定参数，提前封装好的的效果
接下来了解一下贝塞尔曲线各个数值的含义：
水平轴是时间，竖直轴进度就是从A 位置走到 B 位置。开始位置是（0,0）点，结束位置是（1,1）点，水平方向从0走到1，竖直方向也是从0走到1，这些是已经定好的。
我们能控制到就是曲线，是快速完成还是慢速完成，还是以一个变速的效果。会设置一个 B 点和一个 C 点去控制。
示例
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 过渡属性：属性 过渡时间 时间曲线 延时时间 */
transition: all 2s linear 0s;
}
/* 设置终点，鼠标移上时才加载从而造成时间差 */
.box:hover{
width: 500px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
300px是起点，500px是终点，如果没有 transition: all 2s linear 0s; 就是鼠标移上时立即从300px变成500px，有了就是缓慢变成，一旦离开就会缓慢恢复为300px。
可以在这里自己配置贝塞尔曲线的参数：
拖动会出现值，直接将值复制到代码中即可。
浏览器兼容
• Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
• Safari 需要前缀 -webkit-。
• 注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
