一幅长文细学HTML5和CSS3（三）——CSS3（下）
3.23 CSS3新特性
CSS3的现状
- 新增的CSS3特性有兼容性问题，ie9+才支持
- 移动端支持优于PC端
- 不断改进中，应用相对广泛
3.23.1 属性选择器
属性选择器可以更具特定属性来选择元素，这样就不用借助与类或id选择器。
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att = “val”] | 选择具有att属性且属性值等于val的E元素 |
| E[att^“val”] | 匹配具有att属性且值以val开头的E元素 |
| E[att$=“val”] | 匹配具有att属性且值以val结尾的E元素 |
| E[att*=“val”] | 匹配具有att属性且值中含有val的E元素 |
程序清单3_23_1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* E[att] */
div[class]{
background-color: rgb(248, 127, 147);
}
/* E[att = "val"] */
div[id = "Test2"]{
background-color: skyblue;
}
/* E[att^"val"] */
div[id ^= "tes"]{
background-color: gold;
}
/* E[att$="val"] */
div[id $= "4"]{
background-color: red;
}
/* E[att*="val"] */
div[id *= "on"]{
background-color: green;
}
div{
height:200px;
margin: 2px;
}
</style>
</head>
<body>
<div class = "Test1"></div>
<div id = "Test2"></div>
<div id = "test3"></div>
<div id = "Test4"></div>
<div id = "ontest5"></div>
</body>
</html>
3.23.2 结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
说明：nth-child
nth-child选择器可以选择某个父元素的一个或多个特定的子元素
- n可以是数字、关键字和公式
- n如果是数字，就是选择第n个子元素，里面数字从1开始
- n可以是关键字：even偶数，odd奇数
- n可以是公式，公式的变量仅仅只能使用字母n。若公式只填n则选择器从0开始计算，但是第0个元素或者超出了元素的个数会被忽略，可以理解为此时选择器相当于全选子元素。也可以填2n，3n之类的，或者2n+1啥的，看你需求了。
区别：child和type
child要求类型指定正确，如div里套两个标签，先一个p标签后一个div标签，如果此时选用div div:first-child则选不出来p标签也选不出来div标签，因为这样写==意为选取div且第一个元素==，而嵌套的标签中没有符合要求的。
type则不用这么要求，还是上面那个例子，如果选用div div:first-of-type则可以选出div标签，因为这样写==意为选出div中的第一个div标签==。
程序清单3_23_2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
height:50px;
width: 100px;
margin: 2px;
list-style: none;
}
ul li:first-child{
background-color: skyblue;
}
ul li:last-child{
background-color: pink;
}
ul li:nth-child(2){
background-color: gold;
}
/* nth-child选择器可以选择某个父元素的一个或多个特定的子元素 */
ol li{
height:50px;
width: 100px;
margin: 2px;
list-style: none;
}
ol li:nth-child(even){
background-color: red;
}
ol li:nth-child(odd){
background-color: blue;
}
/* ol li:nth-child(n){
background-color: yellow;
} */
/* ol li:nth-child(2n){
background-color: yellow;
} */
/* child和type */
div p,div{
height:50px;
width: 100px;
margin: 2px;
background-color: pink;
}
/* 可打开下面的两个标签试着对比 */
div div:first-child{
background-color: blue;
}
/* div div:first-of-type{
background-color: blue;
} */
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<div>
<p></p>
<div></div>
</div>
</body>
</html>
3.23.3 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
说明：伪元素选择器的使用
- CSS3引入双冒号是为了将伪类和伪元素区别开来，浏览器也接受由CSS2原来的单冒号写法，即element::before和element:before等价。
- before和after创建的元素属于行内元素，可以理解为一个最左边的盒子和一个最右边的盒子。该元素在文档树中无法找到，故称为伪元素。
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，选中为1
程序清单3_23_3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
div::before{
content:'I';
}
div::after{
content:'You';
}
</style>
</head>
<body>
<div>Love</div>
</body>
</html>
3.23.4 盒子模型
CSS3中可以通过box-sizing来指定盒模型。该属性有两个值：content-box（默认）、border-box。
| 类型 | 说明 |
|---|---|
| content-box | 盒子大小为：width+padding+border |
| border-box | 盒子大小为：width |
注：一般在初始化时就可以将盒子们全局设定为border-box。
3.23.5 滤镜
filter属性可以将模糊或颜色偏移等图形效果应用于元素，格式为==filter:函数()==，这里我们只讲一个较常用的函数blur模糊，参数传px数值，数值越大越模糊。
3.23.6 计算
calc函数可以用于CSS属性的计算，如宽度不想直接声明具体数值而想先计算再返回值，那就可以使用calc函数。calc函数仅允许加减乘除。
注：加减乘除运算符左右必须有两个空格，否则运算失败。
3.23.7 过渡
过渡（transition）是CSS3中具有颠覆性的特征之一。我们可以在不使用Flash动画和js的情况下就能做出过渡动画的效果。其经常和:hover一起搭配使用。
格式：transition:要过渡的属性 花费时间 [运动曲线] [何时运动];
使用方式：谁用过渡给谁加
| 属性值 | 说明 |
|---|---|
| 过渡属性 | 想要变化的css属性，宽度高度 背景颜色 内边边距都可以，如果想要全部变化，写all即可 |
| 花费时间 | 单位是s(秒)，必须写单位 |
| 运动曲线 | 默认是ease，可以选择其他曲线，见下图 |
| 何时开始 | 单位是s(秒)，可以设置延迟触发时间，必须写单位，默认是0s。 |
程序清单3_23_7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: pink;
border-radius: 200px;
transition: all 2s;
}
div:hover{
width: 400px;
height: 400px;
background: skyblue;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.23.8 2D转换
转换（tansform）是CSS3具有颠覆性的特征之一，可以实现元素的位移、选择、缩放等效果。
移动
语法：
- transform:translate(x,y);
- transform:translateX(n);
- transform:translateY(n);
说明：
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点，就是不会影响其他元素的位置
- translate中的百分比单位是相对于自身元素的百分比，如一个盒子高30px，使用translataY(50%)实际上是往下移动15px
- 对行内标签没有效果
旋转
语法：transform:rotate(度数);
说明：
- rotate里面度数要带单位，单位为deg
- 角度为正则顺时针，负为逆时针
- 默认旋转的中心点是元素的中心点
缩放
语法：transform:scale(x倍数,y倍数);
说明：scale缩放的最大优势在于可以设置转换中心点缩放，默认以中心点缩放且不影响其他盒子。
旋转、缩放中心点
语法：transform-origin:x y;
说明：
- 注意后面的参数x和y用空格隔开
- xy默认转换的中心点是元素的中心点(50% 50%)
- 还可以给xy设置像素或者方位名词
综合写法
语法：transform:translate() rotate() scale()…
说明：
- 综合写法的顺序会影响转换的效果
- 移动要写在所有属性的最前面
3.23.9 动画
动画（animation）是CSS3具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
定义动画的方式
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
注：from和to等价于0%和100%
调用动画的方式
拥有动画的选择器{
animation-name: 动画名;
animation-duration: 动画花费时长;
}
动画序列
通过定义动画序列中一段时间内不同的关键帧所拥有的状态，可以实现一个动画经过多种状态，这是过渡所做不到的。
- 点赞
- 收藏
- 关注作者
评论（0）