css3 的新特性：CSS3新特性及浏览器版本兼容性解决
css3 的新特性：CSS3新特性及浏览器版本兼容性解决3.1 CSS初始化通过以下四种方式可以解决浏览器兼容CSS3新特性（属性）在https://lea.verou.me/projects/这个网站中，还有一些其他工具。（2）通过https://caniuse.com/这个网站，可以查询CSS属性、html标签以及js等在不同类型浏览器不同版本下的支持情况。通过https://caniuse.com/ciu/comparison，可以具体看到不同类型浏览器的不同版本对web开发规范的支持情况。
CSS是是web开发中三大规范（HTML、CSS、JavaScript）之一，入门参见：Web前端开发-CSS入门干货01 。
1996年底，CSS的第一个正式标准成为W3C的推荐标准，1998年5月推出CSS第二版规范，CSS3是在css基础上发展而来，2001年W3C组织完成其草案规范。
CSS3规范的新特点是进行了模块划分，将同类型属性划归为一个模块，如此有利于各个模块的独立更新和演进。
（1）通过css3test.com网站，可以检测到你当前浏览器对CSS3支持度。
在https://lea.verou.me/projects/这个网站中，还有一些其他工具。
（2）通过https://caniuse.com/这个网站，可以查询CSS属性、html标签以及js等在不同类型浏览器不同版本下的支持情况。
通过https://caniuse.com/ciu/comparison，可以具体看到不同类型浏览器的不同版本对web开发规范的支持情况。
通过以下四种方式可以解决浏览器兼容CSS3新特性（属性）
3.1 CSS初始化
CSS初始化即主动设置默认值，而不给浏览器自由发挥的机会。关于CSS初始化具体作用及方式参见：CSS样式初始化 。
3.2 浏览器的私有属性
浏览器的私有属性，是指属于各浏览器，还未被W3C的标准规范接纳，通常在私有属性前加各浏览器相应的前缀用以区分。
通过MDN（https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix）中可以看到除了CSS外，JavaScript的API相对于各浏览器也有私有属性。
主流浏览器引擎前缀:
（1）-webkit- （谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器）
（2）-moz- （火狐浏览器）
（3）-o- （旧版Opera浏览器）
（4）-ms- （IE浏览器 和 Edge浏览器）
通常先写浏览器私有属性，最后写标准规范属性，示例代码：
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
3.3 CSS hack
CSS hack是指针对不同浏览器及同一浏览器不同版本对同一个CSS样式支持并不一致，所以针对不同的浏览器/不同版本编写相应的CSS code的过程。
CSS hack通常认为有三种分类：属性前缀法、选择器前缀法、条件注释法。
（1）属性前缀法
在属性前加前缀的方式，指定某个版本的IE可以识别该属性。
_ IE6
、* IE6、IE7
\9 IE6、IE7、IE8、IE9
\0 IE8、IE9、IE10、IE11
*background-color:black; /* IE6 IE7 */
background-color:yellow;/* IE6 IE7*/
background-color:gray\9; /* IE6 IE7 IE8 IE9 IE10 */
background-color:purple\0; /* IE8 IE9 IE10 */
background-color:orange\9\0;/*IE9 IE10*/
（2）选择器前缀法
在选择器前加前缀的方式，指定某个版本的IE可以识别该属性。如下：
*html: *前缀只对 IE6 生效
* html: * 前缀只对 IE7 生效
（3）条件注释法
条件注释法是将样式设置在条件语句内，可以被对应的IE版本进行识别。
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
3.4 自动化插件
Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。
4.CSS3新特性4.1 CSS3中新增的选择器
（1）属性选择器
属性选择器使用中括号（[ ]）设置，详细语法参见Web前端开发-CSS入门干货02 中的属性选择器。
（2）结构伪类选择器
伪类选择器是操作html中已经存在的标签，用冒号（:）进行设置，其语法参见：Web前端开发-CSS中伪类和伪元素，然而这里写的太复杂，常用的有选第一个、选最后一个、选奇数、选偶数、根据公式选。
<style>
/* 选择第一个后代元素 */
ul li:first-child {
color: red;
}
/* 选择最后一个后代元素 */
ul li:last-child {
color: blue;
}
/* 括号内为关键词-even-选择偶数后代元素 */
ul li:nth-child(even) {
color: green;
}
/* 括号内为关键字-odd-选择奇数后代元素 */
ul li:nth-child(odd) {
color: salmon;
}
/* 括号内为公式-选择全部后代元素 n从1开始到所有后代元素数量*/
ul li:nth-child(n) {
color: skyblue;
}
ul li:nth-child(2n) {
color: tomato;
}
</style>
<body>
<!-- 结构伪类选择器 -->
<ul>
<li>第一个后代元素</li>
<li>第二个后代元素</li>
<li>第三个后代元素</li>
<li>第四个后代元素</li>
<li>第五个后代元素</li>
</ul>
</body>
（3）nth-child(n)和nth-of-type(n)的区别
nth-child(n)先匹配到第n个盒子，然后再匹配父元素类型（标签类型），如果满足条件则设定该样式，否则该选择器样式无效；
nth-of-type(n)先匹配父元素类型，然后再匹配到第n个盒子，如果满足条件则设定该样式，否则该选择器样式无效。
/* 先匹配section下的div，然后再匹配1 ，所以匹配到蜡笔小新*/
section div:nth-of-type(1) {
color: red;
}
/* 先匹配section中的第一个盒子 然后再匹配div，结果第一个是p，所以没匹配到 */
section div:nth-child(1) {
color: blue;
}
<body>
<section>
<p>黑猫警长</p>
<div>蜡笔小新</div>
<div>樱桃小丸子</div>
</section>
</body>
（3）伪元素选择器
伪元素选择器是操作html中不存在的逻辑标签，起到了减少html标签、降低html标签复杂嵌套的作用。用双冒号（::）进行设置，其语法参见：Web前端开发-CSS中伪类和伪元素 。
以常用的::before和::after进行举例。
::before在某元素内部之前创建逻辑标签；
::after在某元素内部之后创建逻辑标签；
需要注意的是以上创建的逻辑标签可以看作行内标签，且必须有content属性。
从Web前端开发-CSS三大特性和书写规范 中CSS三大特性之一，优先级中可以查看各类选择器的权重。
<style>
div::before {
content: "我是";
}
div::after {
content: "神探";
}
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div>狄仁杰</div>
</body>
伪元素的常有应用（1）清除浮动，参见Web前端开发-CSS布局-浮动和定位-入门干货 。
4.2 CSS3盒子模型新属性
利用box-sizing来指定盒子模型，当其属性值为content-box时，盒子的大小等于width padding border的和；当其属性值为border-box时，盒子的大小为width，当padding和border改变大小时，盒子大小不会改变。
4.3 过渡（动画）
在CSS3中增加了新的属性，过渡translation，能够实现动画效果。
translation有四个分量属性：要过渡的属性、花费的时间、运动曲线、何时开始；
1）要过渡的属性：即想要变化的CSS的属性，包括宽度、高度、背景颜色、内外边距等；
2）花费的时间：单位为秒；
3）运动曲线：默认值为ease，可省略不写；
a）ease：表示逐渐慢下来；b）linear：表示匀速；c）ease-in：表示加速；d）ease-out：表示减速；e）ease-in-out：表示先加速后减速；
4）何时开始：单位为秒，默认值0s，表示不延迟，就开始过渡（动画）
比如如下应用：
<style>
div {
width: 100px;
height: 50px;
background-color: rosybrown;
/* 设置div宽度属性为过渡属性 */
transition: width 0.5s ease;
}
div:hover {
width: 150px;
}
</style>
