1 CSS3 基本语法
1.1 CSS3 浏览器私有前缀
chrome 浏览器： -webkit-
safari 浏览器： -webkit-
firefox 浏览器： -moz-
旧 opera 浏览器： -o-
旧 IE 浏览器：-ms-
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
1.2 CSS3 新增长度单位
rem 根元素字体大小的倍数，只与根元素字体大小有关。
vw 视口宽度的百分之多少 10vw 就是视口宽度的10%。
vh 视口高度的百分之多少 10vh 就是视口高度的10%。
vmax 视口宽高中大的那个的百分之多少。
vmin 视口宽高中小的那个的百分之多少。
1.3 CSS3 新增颜色设置方式
rgba a 是 opacity 表示不透明度，取值 0 ~ 1 之间，数值越大越不透明。 rgba(255, 0, 0, .8)
hsl h 表示色调，取值0~360； s 表示饱和度，取值 0% ~ 100%；l 表示亮， 取值0% ~ 100%。 hsl(120, 100%, 50%)
hsla 在hsl 的基础上添加了不透明度。 hsla(180, 100%, 50%, .5)
2 CSS3 选择器
2.1 基本选择器（6个）
-
标签名选择器
标签名 {} -
类名选择器
.类名 {} -
ID 名选择器
#ID名 {} -
全局选择器
* {} -
并集选择器（群组选择器）
选择器1，选择器2,选择器3 {} -
交集选择器
p.open {} .item.active {}
2.2 层级选择器（4个）
-
后代元素选择器
选择器1 选择器2 {} -
子元素选择器
选择器1 > 选择器2 {} -
相邻兄弟元素选择器
选择器1+选择器2 {}/* 选择类名是 active 元素的后面紧邻的标签名是 li 的兄弟元素 */ .active+li { } -
通用兄弟选择器
选择器1~选择器2 {}/* 选择类名是 active 元素的后面所有的标签名是 li 的兄弟元素 */ .active~li { }
2.3 属性选择器（5个）
[属性名]选择包含某个属性的元素。[属性名="值"]选择包含某个属性并等于指定值的元素。[属性名^="值"]选择包含某个属性，属性值以指定的值开头的元素。[属性名$="值"]选择包含某个属性，属性值以指定的值结尾的元素。[属性名*=“值”]选择包含某个属性，属性值包含指定值的元素。
2.4 伪类选择器
① 动态伪类选择器（5个）
:link未访问过。用于超链接。:visited已访问过的；用于超链接。:hover鼠标悬停在上面。:active鼠标在上面并鼠标按键按下不松开。:focus获取焦点的元素；适用于表单控件。
② 目标伪类选择器（1个）
:target地址锚点指向的元素（url中的锚点名与元素的锚点名一致）
③ 语言伪类选择器 (1个，了解)
:lang()根据语言选择元素，元素通过 lang 属性指定语言，如果没有指定从祖先元素上继承。
④ UI元素伪类选择器（3个）
:checked被选中的单选按钮或复选框。:enable可用的表单控件（只要没有设置 disabled 属性就是可用的）:disabled不可用的表单控件（设置了 disabled 属性）
⑤ 结构伪类选择器（12个）
:root根元素。:empty既没有后代元素也没有文本内容的元素。（空格也算文本内容）:first-child所有兄弟元素中的第一个。:last-child所有兄弟元素中的最后一个。:nth-child(n)所有兄弟元素中的第 n 个； n是个数字，从1开始。:nth-last-child(n)所有兄弟元素中的倒数第 n 个； n是个数字，从1开始。:only-child选择没有兄弟元素的元素（独生子女）。:first-of-type所有同标签名兄弟元素中的第一个。:last-of-type所有同标签名兄弟元素最后一个。:nth-of-type(n)所有同标签名兄弟元素中的第 n 个； n是个数字，从1开始。:nth-last-of-type(n)所有同标签名兄弟元素中的倒数第 n 个； n是个数字，从1开始。:only-of-type选择没有同标签名兄弟元素的元素。
注意：
:nth-child（）、:nth-last-child()、:nth-of-type()、:nth-last-of-type()括号中除了写数字指定第几个，还可以写关键字或公式。2n表示2的倍数，3n表示3的倍数，odd表示奇数，even表示偶数
li:nth-child(2n+1) {
background-color: cyan;
color: #fff;
}
li:nth-child(odd) {
background-color: cyan;
color: pink;
}
li:nth-child(even) {
background-color: purple;
color: yellow;
}
⑥ 否定伪类选择器（1个）
:not(选择器)排除满足括号中选择器条件的元素。
2.5 伪元素选择器（6个）
::first-letter用于给元素中的第一个文字（字母或汉字）设置样式。::first-line用于给元素中的第一行文字设置样式。::before动态地给元素创建一个子元素位于最开始的位置，必须设置content属性才生效。::after动态地给元素创建一个子元素位于最后的位置，必须设置content属性才生效。::placeholder用于给文本输入框或文本域设置 placeholder 文字的样式。::selections用于设置文本被鼠标选中之后的样式。
3 CSS3 新增盒子模型相关样式
① box-sizing 属性
用于设置 width 和 height 设置的是谁的大小，有两个值：
content-box： 默认值，width 和 height 设置的是内容的大小。
border-box: 表示 width 和 height 设置的是盒子的总的大小。
② 盒子阴影 box-shadow
用于设置元素的阴影，可以指定阴影的偏移位置、颜色、模糊值、外延值以及内阴影。
box-shadow:<length>① <length>②;
box-shadow:<length>① <length>② <color>;
box-shadow:<length>① <length>② <length>③;
box-shadow:<length>① <length>② <length>③ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color> inset;
box-shadow:<length>① <length>② inset;
③ 不透明度 opacity
设置整个元素为半透明效果。 opacity 的值是 0 到 1 之间的小数，数值越大越不透明，1表示完全不透明，0表示完全透明。
opacity 与 rgba 的区别？
opacity 是一个属性，设置的是整个元素的不透明度。
rgba 是颜色的设置方式，用于设置颜色。
