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