偽類選擇器

2021-10-03 23:11:34 字數 1702 閱讀 5310

動態偽類 5個

ui狀態偽類 3個

結構偽類 12個

目標偽類 1個

否定偽類 1個

語言偽類 1個

屬性選擇器 7個

1、a:link{} 鏈結初始的樣式,指的是a標籤

2、a:visited{} 鏈結訪問過後的樣式 指的是a標籤

3、:hover{} 滑鼠懸停 可以是任何標籤 (重點)

4、a:active{} 鏈結按住不動的時候的樣式

5、input:focus{} 選擇獲得焦點的輸入字段之後的樣式

前4個如果都是同時給a的話,順序不要亂,並且現在需要手動清除瀏覽器的快取

1、 :disabled{} 禁用的時候

2、 :checked{} 選中的時候

3、 :enabled{} 可用狀態下的時候

必須是第乙個子元素,並且必須是指定型別的

:first-child{}
必須是最後乙個子元素,並且必須是指定型別的

:last-child{}
從頭開始指定子元素的第幾個()裡填需要的第幾個,可以填純數字或者數學表示式n

:nth-child(2){}  表示第二個

:nth-child(2n ){} 表示第2n個

從結尾開始指定子元素的第幾個()裡填需要的第幾個,可以填純數字或者數學表示式n

:nth-last-child(2){}表示倒數第二個

:nth-last-child(2n){}表示從倒數開始第2n個

必須是只有乙個指定的子元素,不可以出現其他型別元素

:only-child{}
子元素中指定元素的第乙個,指定元素不需要規定是第乙個子元素

:first-of-type{}
子元素中指定元素的最後乙個,指定元素不需要規定是最後乙個子元素

:last-of-type{}
指定子元素中的第幾個()裡填需要的第幾個,可以填純數字或者數學表示式n,指定元素不需要規定是第乙個子元素

:nth-of-type(){}
指定子元素中的倒數第幾個()裡填需要的第幾個,可以填純數字或者數學表示式n,指定元素不需要規定是最後乙個子元素

:nth-last-of-type(){}
必須是只有乙個指定的子元素,可以出現其他型別元素排列順序可隨意

:only-of-type{}
當元素為空的時候變化

根元素變化

結論:

-type結尾的比-child結尾的要求低一點,-child結尾較為嚴格

在靜態頁面裡面 目標偽類必須和錨點一起用

錨點必須是a標籤和id一起用
/* 除了偶數的li,其他的li變化 */

ul li:not(:nth-of-type(2n))

就是給不同的語言新增不同的符號去標註

:lang()裡面必須是語言的簡寫
動態偽類5+ui狀態偽類3+結構偽類12+否定偽類1+目標偽類1+語言偽類1

所有的偽類權重是10

屬性選擇器,偽類選擇器,偽元素選擇器

屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...

偽類選擇器

作用根據連線的不同狀態可以以不同的方式顯示 偽類是css 用於向某些選擇器新增特殊的效果。a標籤中有四個 link visited hover active 用法示例 a link 未訪問的連線 顏色可以自定義 a visited 已訪問的連線 hover 滑鼠移動到連線上時顯示的效果 a acti...

偽類選擇器

偽類選擇器 用來設定 某些元素在特殊情況下的屬性 例如 超連結在訪問之後的樣式,文字框獲得輸入焦點後的樣式,文字被選中後的樣式。等 1 visited 這個偽類選擇器用於 超連結。指的是 訪問之後的超連結的樣式。只能修改顏色。3 link 普通超連結的樣式 可以設定顏色 背景顏色。等等 4.hove...