CSS3新增

1 CSS3 的选择器

1.1 基本选择器

tagName
.className #idName * slector,selector,selector 

1.2 层级选择器

selector1 selector2 后代 selectoer1>selectoer2 子元素 selector1+selector2 紧邻在后面的兄弟元素 selector1~selector 后面全部兄弟元素 

1.3 属性选择器

selector[attr] 包含指定的属性 selector[attr=value] 指定属性的值 selector[attr^=value] 属性值以value开头 selector[attr$=value] 属性值以value结束 selector[attr*=value] 属性值包含value selector[][][] 多个属性选择器 

• 属性选择器优先级 同 class

1.4 伪类选择器

/*语法*/ selector:伪类 { } 

:link 未访问的超连接 :visited 访问过的超连接 :hover 鼠标悬停 任意元素 :actived 激活状态的超连接 :focus 得到焦点时 :first-child :last-child :nth-child() 指定数字，也能够指定关键字"odd", "even" :nth-last-child :only-child :fist-of-type :last-of-type :nth-of-type() 指定数字，也能够指定关键字"odd", "even" :nth-last-of-type() :only-of-type() 

1.5 伪元素选择器

::first-letter 第一个字 ::first-line 第一行 ::before 最前面插入一个子元素 ::after 最后面追加一个子元素 

2 CSS3 基础

2.1 浏览器私有前缀

-weibkit-* chrome/safari -moz-* firefox -ms-* ie -o-* opera 

2.2 CSS3 新增的颜色

rgba(r,g,b,不透明度) 不透明度：0~1 小数， 数越大，越不透明 

2.3 CSS3新增加度单位

px
em	默认字体大小的倍数 rem 根元素字体大小的倍数 vw 窗口宽度分红100份 50vw vh 窗口高度分红100份 

2.4 CSS3新增属性

# 从新设置 盒子模型的规则 box-sizing: content-box(默认) / border-box （width/height盒子的宽高） # 外轮廓 在border的外面 不算盒子 outline: outline-style outline-color outline-width # 不透明度 opacity 0~1 小数 

2.3 设置圆角

border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius