每日一練 CSS選擇器整理

2021-08-08 20:04:10 字數 1639 閱讀 4475

標籤選擇器

比如: div 表示頁面內所有的div中的文字的顏色都會變成黑色。

classname選擇器

比如  .class 表示當前根目錄下的所有classname為class的標籤中的文字都是黑色,其他目錄建議一層一層的寫。

id選擇器

比如 #class 表示當前頁面所有id為 class的標籤的文字顏色為黑色。

css後代選擇器(名稱為w3school所複製,感謝)

比如.class span表示標籤class為class中的所有span標籤的文字顏色為黑色

子元素選擇器(名稱為w3school所複製,感謝)

h1 > span表示根目錄下第乙個h1標籤中的span標籤字型顏色變成黑色,其他不變。

相鄰兄弟選擇器(名稱為w3school所複製,感謝)

li+li

這樣的效果ul中除了第乙個li其他的li中的字型顏色都是黑色,因為用這個選擇器的結合符,只能選擇第二個元素,所以以此類推,除了第乙個其他的都沒問題。

[id*=div]

[id^=div]

[id$=div]

偽類選擇器(名稱為w3school所複製,感謝)

li:active 當某個li標籤被啟用之後所要新增的樣式

input:focus 當某個input獲取焦點之後的樣式

li:hover 當滑鼠懸浮在某個li標籤上面的時候所改變的元素

a:link 給超連結新增固定的樣式,也就是預設剛開啟網頁之後的樣式

a:visited 給已經訪問過的連線新增樣式,a標籤中的字型顏色將變為黑色

a:hover 當滑鼠懸浮到a標籤上方的時候,標籤中的字型顏色將變為黑色

a:active 標籤被選定之後,其字型顏色將變為黑色。也就是當滑鼠點下還未抬起的時候的樣式

注意事項:

在 css 定義中,a:hover 必須被置於 a:link 和 a:visited 之後,才是有效的。

在 css 定義中,a:active 必須被置於 a:hover 之後,才是有效的。

偽類名稱對大小寫不敏感。

標籤前後的文字樣式

li:before表示在li標籤最前面加上「你好」兩個字,並且字型顏色為黑色。

li:after表示與上面相反的作用

元素子標籤按序選擇器

li:nth-child(1){}意思是第乙個li元素

li:nth-child(2n+1){}意思是 1 3 5 7等元素

li:last-child{} 意思是最後乙個元素

偽元素li:first-line{}選中li標籤中的第一行文字

li:first-letter{}選中li標籤中的第乙個首字母

:hover 表示當前根目錄的全部背景顏色為黑色

div *:not(h1){}  表示div中所有的元素但是不包含h1標籤下的元素的選中方法

:empty{}表示選中標籤中沒有任何內容的標籤進行樣式處理

:target{} 表示頁面內跳轉的時候,跳轉到哪個區域哪個區域就會執行當前樣式

input的選擇

input[type="text"]:enabled{}

input[type="text"]:disabled{}

表示type型別為text的input中選中能用的和不能用的選中方法

CSS3每日一練之選擇器 結構性偽類選擇器

前端開發網 w3cfuns.com web前端開發起飛區,web前端開發高手聚集地,教程 資源完全免費!前端開發網 w3cfuns.com web前端開發起飛區,web前端開發高手聚集地,教程 資源完全免費!前端開發網 w3cfuns.com web前端開發起飛區,web前端開發高手聚集地,教程 資...

每日一練4

員工表emp 員工編號eid,姓名ename,工作職位title,僱傭日期hiretime,工資salary,獎金bonus,部門depart 部門表dept 部門編號did,名稱dname,部門領導leader 員工資料 1001,張三 銷售 1999 12 1 3000.0,1100.0,102...

每日一練25

請描述 mysql 從安裝到配置的全部詳細過程 確保一台新電腦可以順利使用 mysql mysql安裝嚮導啟動,按 next 繼續 選擇安裝型別,有 typical 預設 complete 完全 custom 使用者自定義 三個選項,我們選擇 custom 有更多的選項,也方便熟悉安裝過程 選擇配置...