本文详细介绍了CSS3的多项新特性，包括选择器的扩展，如伪元素和伪类选择器，媒体查询的使用，@font-face字体加载，变幻效果如translate、scale、rotate等，过渡效果和帧动画的创建，渐变效果，多列布局，以及弹性盒子和图标小图标的运用。这些特性大大丰富了网页的视觉表现和交互体验。
1.选择器：
伪元素选择器
::before
::after
::first-line
::first-letter
::section
伪类选择器
.list>li:first-child 选中第一个子元素
.list>li:last-child 选中最后一个子元素
.list>li:nth-child(n) 选中第五个子元素
.list>li:nth-child(odd) 选中偶数行
.list>li:nth-child(even) 选中奇数行
.list>li:nth-child(2n) 支持数学表达式，选中偶数行
.list>:nth-of-type(1) 选择类型匹配的，选中的是第五个li,跳过ul中其他类型
其他常用特性：
阴影
边线
弧度
滤镜
背景的扩充
定位（display）
2.媒体查询
css2中已经存在了媒体查询,最开始用来指定对应的设备，如tv表示电视、screen表示电 脑、print表示打印机；css3提供了媒体查询，主要针对不同分辨率的屏幕
css2提供的不同屏幕下的样式书写
<style>
@media screen
{
/* 电脑端显示这个样式 */
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print
{
/* 打印机端显示这个样式 */
p.test {font-family:times,serif; font-size:10px}
}
@media screen,print
{
/* 电脑端和打印机显示这个样式 */
p.test {font-weight:bold}
}
@media all
{
/* 用于所有多媒体类型设备 */
p.test {font-weight:bold}
}
</style>css3通过屏幕的分辨率自动判断大小，从而适配对应的css样式。
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@media</tit
最低0.47元/天 解锁文章
扫一扫
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
