CSS3學習筆記2 UI元素狀態偽類選擇器

2022-08-10 18:42:15 字數 1070 閱讀 7245

第3節.ui元素狀態偽類選擇器

part i 這種選擇器的共同特徵:

指定的樣式只有當元素處於某種狀態時才起作用,在預設狀態下不起作用

css3中共有11種ui元素狀態偽類選擇器:

e:hover        |  e:active     |  e:focus  |  e:enable  |  e:disable   

e:read-only   |  e:read-write   

e:checked     |  e:default    |  e:indeterminate  |  e::selection

part ii 使用方法:(見例)

part iii 詳細說明:   

1.  e:hover  滑鼠指標移動到某個文字框控制項上的樣式;   

2.  e:active 元素被啟用(滑鼠在元素上按下還沒有鬆開)時使用的樣式;   

3.  e:focus  元素獲得游標焦點時使用的樣式,主要是在文字框控制項獲得焦點並進行文字輸入的時候使用;      

4.  e:enable  指定當元素處於可用狀態時的樣式;   

5.  e:disable 指定當元素處於不可用狀態時的樣式;       

6.  e:read-only  指定當元素處於唯讀狀態時的樣式;   

7.  e:read-write 指定當元素處於非唯讀狀態時的樣式;      

注:在ff下要寫成 -moz-read-only 或者 -moz-read-write      

例:8.  e:checked  指定當表單中的radio單選框或checkbox核取方塊處於選取狀態時的樣子(ff中要寫成:-moz-checked);   

9.  e:default  指定當頁面開啟時預設處於選區狀態的radio或checkbox控制項的樣式;   

10.e:indeterminate  指定當頁面開啟時,如果一組單選框中任何乙個單選框都沒有被設定為選取狀態時整組單選框的

樣式,如果使用者選取了乙個單選框,則該樣式被取消   

11.e::selection  指定當元素處於選中狀態時的樣式;

css3新增加UI學習

圓角 border radius 8px 全部四個角 border radius 6px 8px 對角線 border radius 6px 10px 8px 右上角跟左下角相同 border radius 100px 150px 前面是x軸半徑 y軸半徑 border radius 100px 2...

css3學習筆記

1.為什麼分許多模組進行管理?為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一,class屬性本身沒有語義,褚翠是用來為css樣式服務的,屬於多餘屬性。第二,使用屬性的話,並沒有把樣式與元素繫結起來,針對同乙個class屬性文字框,下拉框,按鈕都可使用。這樣很...

CSS3學習筆記

一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...