Web前端学习—基础篇(32)_CSS3特点、CSS2与CSS3的区别、CSS3兼容性前缀、CSS3新增选择器

六、CSS3学习

6.1、css3特点

1、特点

 css的升级版本，在css2基础上新增许多特性，弥补css2不足
 css3按照模块进行设计，比较重要的模块包含：选择器、框模型、背景和边框、2D|3D变换、动画、多列布局、用户界面

2、css3现状：

1、部分属性在浏览器中需要添加兼容性前缀
2、移动端支持情况优于PC端
3、不断改进中
4、应用相对较为广泛
5、向后兼容

3、css2和css3的区别：

 css3能让代码更加简洁、页面结构更加清晰合理，性能和效果得到兼顾；css2要请求服务器的次数高于css3，性能和访问相对较差
 css3能实现动画效果；css2更偏向于表现
 css3数据更加精简实用，许多css2中需要实用图片实现的效果，在css3中都可以通过代码实现
 兼容问题，css2所有属性都能在浏览器中呈现；css3中部分属性在浏览器中需要添加兼容性前缀

6.2、渐进增强和优雅降级

• 渐进增强：针对低版本浏览器进行页面构建，保证基本的功能，然后再针对高版本浏览器进行效果、交互之类的改进，追加功能，达到更好的用户体验——普通到华丽
• 优雅降级；一开始构建一个完整的功能，然后再针对低版本浏览器兼容——华丽到普通
  区别：

   渐进增强：从基础到复杂，能适应未来的环境变化
   优雅降级：从复杂到现状，减少用户体验

6.3、CSS3兼容性前缀——私有前缀

 1、写书顺序：先写私有前缀css属性，然后写标准css属性
 2、当一个属性或规则成为标准，并被主流浏览器的最新版本普遍兼容的时候，可以去掉私有前缀

浏览器、内核、私有前缀

autofix

• 在vscode中，安装autoprefixer插件
• 在外部的css文件中书写相关的属性、属性值
• 按下F1，选择autoprefixer：Run，在css文件中添加|删除私有前缀

6.4、css3新增选择器.

(1）属性选择器(举例)

• css2属性选择器

 ele[attr]{ } 指定了属性名称为attr的ele元素
 ele[attr=value]{ } 指定了属性名称为attr，属性值为value的ele元素
 ele[attr~=value]{ } 指定了属性名称为attr,属性值中包含value的ele元素

• css3属性选择器

 ele[attr^=value]{} 指定了属性名称为attr,属性值以value开头的ele元素
 ele[attr$=value]{} 指定了属性名称为attr,属性值以value结尾的ele元素
 ele[attr*=value]{} 指定了属性名称为attr,属性值中包含value的ele元素

(2）结构伪类选择器(举例)

• ele:nth-child(n){ } 一组相同元素中的第n个元素，n取值可以是数值、关键词、表达式
  关键词：odd奇数、even偶数
  表达式：2n+1奇数、2n偶数

• ele:last-child{ } 一组相同元素中的最后一个

• ele:nth-last-child(n){ } 一组相同元素中的倒数第n个元素，n取值可以是数值、关键词、表达式

• ele:nth-of-type(n){ } 一组中ele元素的第n个，n取值可以是数值、关键词、表达式

• ele:nth-last-of-type(n){ }一组中ele元素的倒数第n个，n取值可以是数值、关键词、表达式

(3）状态伪类选择器(举例)

• ele:disabled{} 界面中处于禁用状态的元素

• ele:enabled{} 界面中处于可用状态的元素

• ele:checked{} 界面中处于选中状态的元素