CSS3選擇器筆記

1.屬性選擇器：

[id=test] {…} 選擇id=test字符串的元素

[id*=test] {…} 選擇id存在test字符串的元素

[id^=test] {…} 選擇id 以test字符串開頭的元素

[id$=test] {…} 選擇id以test結尾的元素

 

2.僞類選擇器、僞元素：

p:first-line{…} 選擇p元素中第一行的文字元素

p:first-letter{…} 選擇p元素中的第一個文字元素

p:before{content:’…’} 選擇p元素，在它以前插入一些內容

p:after{content:’…’} 選擇p元素，在它以後插入一些內容

 

3.選擇器root、not、empty、和target

:root{background: red;} 設置html文檔的背景色

:not(p){…} 設置非p元素的背景色

:empty{…} 設置當元素內容爲空時指定的樣式

:target{…} 設置跳轉到target元素的樣式

 

4.選擇器first-child、last-child、nth-child、和nth-last-child

li:first-child{…} 選擇父元素中第一個子元素

li:last-child{…} 選擇父元素中最後一個子元素

li:nth-child(2){…} 選擇父元素第2個元素

li:nth-child(4n+4){…} 選擇父元素第4的倍數

li:nth-last-child(2){…} 選擇父元素倒數第2個元素

li:nth-child(add){…} 選擇父元素中正數下來的奇數元素

li:nth-child(even){…} 選擇父元素中正數下來的偶數元素

li:nth-last-child(add){…} 選擇父元素中倒數上去的奇數元素

li:nth-last-child(even){…} 選擇父元素中倒數上去的偶數元素

 

5.選擇器nth-of-type、nth-last-of-type、和only-child

h2:nth-of-type(add){…} 選擇針對同類型的子元素進行計算，選擇正數下來的奇數元素

h2:nth-of-type(even){…} 選擇針對同類型的子元素進行計算，選擇倒數上去的偶數元素

li:only-child{…} 選擇父元素中只有一個子元素的

 

6.UI元素狀態僞類選擇器 選擇器e:hover、e:active、e:focue

a:hover{…} 選擇當鼠標移入到某個元素上面使用的樣式

a:active{…} 選擇當鼠標按下某個元素而且沒有鬆開時使用的樣式

a:focue{…} 選擇當某個元素得到光標焦點時候使用的樣式

 

7.僞類選擇器e:enabled、和e:disabled

e:enabled{…} 用來選擇當前元素處於可用狀態的樣式

e:disabled{…} 用於選擇當前元素處於不開用狀態的樣式

8.僞類選擇器e:read-only、和e:read-write

e:read-only{…} 用來指定當元素處於只讀狀態的樣式

e:read-write{…} 用來指定當元素處於非只讀狀態的樣式

 

9.僞類選擇器e:checked、e:default、和e:indeterminate、e::selection

e:checked{…} 用來指定當單選框或複選框處於選中狀態的樣式，火狐瀏覽器爲-moz-checked

e:default{…} 用來指定當頁面打開時默認處於選中狀態時的樣式，當用戶改成非選中狀態，樣式依然存在

e:determinate{…} 用來指定當頁面打開時，一組單選款中任何一個都沒有選中時整組的樣式，僅適用Opera

e::selection{…} 用來指定當元素處於指定狀態時候的樣式

 

10.通用兄弟元素選擇器 e~e

div~p{…} 用來指定位於同一個父元素之中，某個元素以後的其餘種類兄弟元素所使用的樣式

 

11.文字和字體相關樣式

text-shadow:5px 5px 5px red 給文字添加陰影效果

word-break:normal|keep-all|break-all 指定自動換行的處理方式

@font-face{font-family…;src:…} 使用特殊字體

 

12.瀏覽器前綴

-webkit- google內核前綴

-moz- 火狐瀏覽器內核前綴

-ms- IE瀏覽器內核前綴

-o- Opera（早期），Presto引擎，後改成Webkit引擎

 

13.盒子模型相關

box-shadow:5px 5px 5px red; 設置盒子陰影效果

 

14.背景和邊框樣式

background-clip:border|padding|content 設置背景的顯示範圍

background-origin:border|padding|content 設置背景圖像的繪製起點

background-size:10px auto 設置背景圖形的尺寸

background-image:url(…) 設置背景圖形的圖形

background-repeat:no-repeat|repeat-x|repeat-y 設置背景圖形的平鋪方式

background-position:x% y%|top left 設置背景圖形的起始位置

border-radius 繪製圓角邊框

border-image 使用圖像邊框

 

15.變形處理transform

transform:rotate(45deg) 順時針旋轉45度

transform:scale(0.5) 縮放50%

transform:skew(30deg,40deg) 水平傾斜30度，垂直傾斜30度

transform:translate(30deg,40deg) 水平反向移動30，水平方向移動40deg

transform-origin:left botton 修改變形的基準點爲左下角

 

16.動畫處理transition、animations

transition-property:background-color 指定背景顏色變化

transition-duration:1s 過分時間

tansition-timing-function:linear 過分動畫

transition:background-color 1s linerar  指定背景色改變時候在1s中內平滑過分

@-webkit-keyframes mycolor 建立關鍵帕的樣式

{

    0%{background-color: red;}

    40%{background-color: darkblue;}

    70%{background-color: yellow; }

    100%{background-color: red; }

}

-webkit-animation-name: mycolor; 指定背景色變化名稱

-webkit-animation-duration: 5s; 指定變化時間

-webkit-animation-timing-function: linear; 指定變化方式

linear 動畫從頭至尾的速度是相同的

ease 默認，動畫以低速開始，而後加快，在結束前變慢

ease-in 動畫以低速開始

ease-out 動畫以低速結束

ease-in-out 動畫以低速開始和結束

-webkit-animation-iteration-count:infinite|n 規定動畫無限次或n次播放

 

17.多欄佈局和盒佈局

column-count:n 元素內容被劃分的列數

column-width:10px 設定欄的容寬度而不設置元素的寬度

column-gap:10px 設置多列間的間隔距離

column-rule:1px soid red 設置多列之間的線條間隔