- 新增的选择器标签,见下面第3条:css选择器
- display:flex响应式布局
- border-radius box-shadow text-shadow box-sizing font-face
- transform2D/3D转换 (scale rotate translate) transition过渡(简单动画)
- animation 动画
- @media媒体查询 max-width等判断
- 多列布局:columns column-count column-gap column-span等
另:
1、选择器中单冒号和双冒号的区别:
单冒号代表伪类,双冒号代表伪元素。为了兼容旧版本浏览器,最好都写单冒号,但当只需要支持高级版本时,建议伪类和伪元素区分写。
2、a锚点元素的伪类顺序:lvha,即:
- :link 未点击时的样式
- :visited 鼠标点击后的样式
- :hover 鼠标悬停的样式
- :active 鼠标点击后未抬起时的样式
3、css选择器:
// css2中的
div > p div下的直接子元素p
div + p 紧挨着div的p元素
:last-child :first-child
//四大伪类
[attribute~=value] 属性包含值
// css3中的
div ~ p 前面有div的p元素(前面的兄弟节点中有div的p元素)(css3中的)
:nth-child(n) :nth-last-child(n) //n取值从0开始计算,但是数元素的时候,是从1开始数的
tagName:nth-of-type className:nth-of-type(n) //选取父元素下的第N个XXX元素(要指定类型)
[attribute^=value]属性以value开头
[attribute$=value]属性以value结尾
[attribute*=value]属性包含值