1.屬性選擇器
選擇符簡介
e[att]
選擇具有att屬性的e元素
e[att=「val」]
選擇具有att屬性且屬性值等於val的e元素
e[att^=「val」]
匹配具有att屬性，且值以val開頭的e元素
e[att$=「val」]
匹配具有att屬性，且值以val結尾的e元素
e[att*=「val」]
匹配具有att屬性，且值中含有val的e元素
類選擇器、屬性選擇器、偽類選擇器權重為10
2.結構偽類選擇器
選擇符簡介
e:first-child
匹配父元素中的第乙個子元素e
e:last-child
匹配父元素中的最後乙個子元素e
e:nth-child(n)
匹配父元素中的第n個子元素e
e:first-of-type
指定型別e的第乙個
e:last-of-type
指定型別e的最後乙個
e:nth-of-type(n)
指定型別e的第n個
關於nth-child(n):
n可以是數字、關鍵字和公式
常見關鍵字有even(偶數)、odd(奇數)
如果n是公式，則n從0開始算，第0個或超出範圍的元素直接忽略，常見公式有以下幾個:
公式取值
2n偶數
2n+1
奇數5n
5 10 15……
n+5從第5個開始（包含第5個）到最後
-n+5
前5個（包含第5個）
關於nth-of-type(n):
選擇父元素指定型別的第n個子元素
3.偽元素選擇器
選擇符簡介
::before
在元素內部的前面插入內容
::after
在元素內部的後面插入內容
一些注意點：
before和after必須有content屬性
before在內容的前面，after在內容的後面
before和after建立乙個元素，但是屬於行內元素
因為在dom裡面看不見剛才建立的元素，所以我們稱為偽元素
偽元素和標籤選擇器一樣，權重為1
轉換是css3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、縮放等效果1.2d轉換之移動2d轉換是改變標籤在二維平面上的位置和形狀的一種技術
語法：
transform: translate(x,y);
x就是x軸上移動的位置，y就是y軸上移動的位置，如
transform: translate(100px, 100px);
也可以分開寫：
transform: translatex(n);
transform: translatey(n);
一些注意：
定義2d轉換中的移動，沿著x和y軸移動元素
translate最大的優點就是不會影響到其他元素的位置
translate中的百分比單位是相對於自身元素的translate(50%,50%);
對行內標籤沒有效果
2.2d轉換之旋轉
語法：
transform: rotate(度數);
一些注意：
rotate裡面的度數單位是deg
角度為正時是順時針，角度為負時是逆時針
預設旋轉的中心點是元素的中心點
設定元素轉換中心點transform-origin：x y;
transform-origin: 100px 100px;
x y預設轉換中心點（50% 50%）
還可以給x y設定方位名詞（top bottom left right center）
3.2d旋轉之縮放
語法：
transform: scale(x,y);
一些注意：
transform:scale(1,1)寬和高都放大一倍，相當於沒有放大
transform:scale(2,2)寬和高都放大兩倍
transform:scale(2)相當於transform:scale(2,2)
transform:scale(0.5,0.5)縮小
scale縮放可以設定轉換中心點縮放，預設以中心點縮放，而且不影響其他盒子
動畫是css3中具有顛覆性的特徵之一，可通過設定多個節點來精確控制乙個或一組動畫，常用來實現複雜的動畫效果1.動畫的基本使用
製作動畫分為兩步：
1.先定義動畫
用keyframes定義動畫
@keyframes move
100%
} @keyframes move 25%
50%75%
100%
}
div描述@keyframes
規定動畫
animation
所有動畫屬性的簡寫屬性，除了animation-play-state屬性
animation-name
規定@keyframes動畫的名稱，不能為空
animation-duration
規定動畫完成的乙個週期所花費的秒或毫秒，預設是0，不能為空
animation-timing-function
規定動畫的速度曲線，預設是ease
animation-delay
規定動畫何時開始，預設是0
animation-iteration-count
animation-direction
animation-play-state
規定動畫是否正在執行或暫停，預設是running，還有pause
animation-fill-mode
規定動畫結束後狀態，保持forwards，回到起始backwards
x軸：水平向右(右正左負)1.3d位移y軸：垂直向下(下正上負)
z軸：垂直螢幕(外正裡負)
語法：
/* 僅在x軸移動 */
transform:
translatex
(100px)
;/* 僅在y軸移動 */
transform:
translatey
(100px)
;/* 僅在z軸移動，z軸方向單位為px */
transform:
translatez
(100px)
;/* x,y,z軸方向都要移動 */
transform:
translate3d
(100px，100px，100px)
;
3d移動比2d多了乙個可移動的z軸2.透視
如果想要在網頁中產生3d效果需要透視3.3d旋轉模擬人類的視覺位置，可認為安排乙隻眼去看
透視也稱為視距：人的眼睛到螢幕的距離
距離視覺點越近的在電腦平面成像越大，越遠越小
透視的單位是畫素 透視寫在被觀察元素的父元素上
3d旋轉可以讓元素在三位平面內沿著x軸，y軸，z軸或自定義軸進行旋轉語法：
transform:
rotatex
(45deg)
; transform:
rotatey
(45deg)
; transform:
rotatez
(45deg)
;
transform: rotate3d(x,y,z,deg);
transform:
rotate3d(1
,0,0
,45deg)
;
控制子元素是否開啟三維立體環境
/* 開啟3d立體空間 */
transform-style: preserve-
3d;/* 不開啟3d立體空間 */
transform-style: flat;
css3的一些新特性
background rgba 254,255,200,0.75 例如上面 所示，前三個引數分別是分別是 r g b 三原色，範圍是 0 255。第四個引數是背景透明度，範圍是 0 1，如 0.5 代表透明度 50 這個屬性使我們在瀏覽器中也可以做到像 win7 一樣的半透明玻璃效果。css3圓角示...
css3的一些新特性
background rgba 254,255,200,0.75 例如上面 所示，前三個引數分別是分別是 r g b 三原色，範圍是 0 255。第四個引數是背景透明度，範圍是 0 1，如 0.5 代表透明度 50 這個屬性使我們在瀏覽器中也可以做到像 win7 一樣的半透明玻璃效果。css3圓角示...
css3的一些新特性
css3新增的一些特性 1.屬性選擇器 2.結構偽類選擇器 3.偽元素選擇器 4.2d轉換 5.動畫 6.3d轉換 7.遊覽器私有字首 一.屬性選擇器 選擇符簡介 舉例e att 選擇具有att的e元素 button disabled e att val 選擇具有att屬性且屬性等於val的e元素 ...