选择器
属性选择器
1、[attr]：选择包含 attr 属性的标签
2、[attr=value]：选择 attr 属性值为 value 的标签
3、[attr^=value]：选择 attr 属性值以 value 开头的标签
4、[attr*=value]：选择 attr 属性值包含 value 的标签
5、[attr$=value]：选择 attr 属性值以 value 的标签
示例
div[class] {
/* 会选择包含class属性的div标签 */
}
div[class="active"] {
/* 会选择class属性值为active的div标签 */
}
div[class^="header"] {
/* 会选择class属性以header开头的div标签 */
}
... ...
结构伪类选择器
E:firse-child 作为父元素的第一个子元素的元素E。与 E:nth-child(1) 等同
E:last-child 作为父元素的最后一个子元素的元素E。与 E:nth-last-child(1) 等同
E:root 选择匹配元素E所在文档的跟元素。在HTML文档中，跟元素始终是html，此时该选择器与html类型选择器匹配的内容相同。
E F:nth-child(n) 选择父元素 E 的第 N 个子元素 F。其中N可以是整数（1、2、3）、关键字（even、odd）、可以是公式（2n+1、-n+5）而且n值起始值为1
E F:nth-last-child(n) 选择元素 E 的倒数第N个子元素f。此选择器与E F:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中:nth-last-child(1)始终匹配的时最后一个元素，与:last-child等同
E:nth-of-type(n) 选择父元素内具有指定类型的第 N 个 E 元素
E:nth-last-of-typy(N) 选择父元素内具有指定类型的倒数第 N 个 E 元素
E:first-of-type 选择父元素内具有指定类型的第一个E元素，与:nth-of-type(1)等同
E:last-of-type 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child 选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type 选择父元素只包含一个同类型的子元素，且该子元素匹配 E 元素
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点。
:first-of-type 与 :last-of-type 和 :first-child 与 :last-child
:first-of-type
伪类是定位一组同类型的兄弟元素中的第一个元素，不管这个元素在兄弟元素中的位置如何
:first-child
伪类是定位一组兄弟元素中的第一个元素，这些兄弟元素不一定是同类型的。
新样式
边框
1、border-radius: 创建圆角边框
2、border-image: 使用图片来绘制边框
阴影
1、box-shadow 设置元素阴影
1、水平阴影 必须设置
2、垂直阴影 必须设置
3、模糊距离 (虚实)
4、阴影尺寸 (影子大小)
5、阴影颜色
6、内/外阴影
背景
1、background-clip
2、background-origin
3、background-size
4、background-break
文字
1、word-wrap
语法：word-wrap: normal|break-word
normal：使用浏览器默认的换行
break-all：允许在单词内换行
2、text-overflow
设置或检索当 当前行 超过指定容器的边界时如何显示
clip: 修剪文本
ellipsis: 显示省略符号来代表被修剪的文本
3、text-shadow
向文本应用阴影
能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
4、text-decoration
CSS3 里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置
text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度
颜色
css3 新增了新的颜色表示方式 rgba hsla
1、rgba 分为两部分，rgb为颜色值，a为透明度
2、hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
CSS3 颜色渐变
1、linear-gradient: 线性渐变
2、radial-gradient: 径向渐变
颜色渐变是指在两个颜色之间平稳的过渡。以往我们如果希望有颜色渐变的效果，会在绘图工具(如PS)设计出希望的效果，然后作为图片来实现这种效果。
现在通过浏览器可以渲染而成，这样可以减少下载的时间和带宽的使用，以及在放大时看起来效果更好，因为这是浏览器自动生成的。
1、线性渐变 => linear-gradient
线性渐变指的是颜色在一条线上平稳的变化，为了实现线性渐变，我们要规定线的方向，起点颜色和终止颜色
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
其中 linear-gradient(to right, red, green);
其中第一个参数 to right 是用来设置方向的，设置方向的值有
1、to right：从左往右
2、to left：从右往左
3、to top：从下往上
4、to bottom：从上往下，默认值
5、to right bottom：从左上角往右下角
除了可以设置这些值之外，还可以设置角度
linear-gradient(0deg, red, green);
2、径向渐变 => radial-gradient
径向渐变是指以某点为圆心，向外进行颜色渐变。所以为了实现径向渐变，我们要规定圆心的位置和起点颜色和终点颜色
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
其中 shape 为渐变的形状，有 两 种取值
1、circle 圆形
2、ellipse 椭圆, 默认值
css3 动画
1、transition 过渡
2、translate 2D变换 【 移动、缩放、转动、拉长或拉伸 】
3、animation 动画
布局
1、flex 布局
2、grid 布局