全部偽類和使用

2021-10-05 15:31:43 字數 1616 閱讀 4485

:link 未訪問的鏈結

:visited 已經訪問的鏈結

:hover 滑鼠停留時候鏈結

:active 啟用鏈結時候

:focus 指當前擁有輸入焦點的元素,因為a元素可以被tab鍵選中聚焦,所以focus也適用a元素。

如果不想元素被選中可以tabindex調整tab選中的順序

案件
使用注意:

:hover必須放到:link和:visited後才能生效,:active必須放到:hover後才能生效。其中:hover,:active可以用在其他元素上

:target 用於a鏈結錨點,可修改錨點的樣式

:lang,用於設定語言種類

給元素新增狀態

:checkde

:enabled

:disabled

按鈕
按鈕是不可選擇狀態,如果不設定則預設是enabled

可以在前面加類名表示這個類的子元素,如有class名為z1,就可以設定z1的子元素偽類:

z1 :nth-child(1) ,z1 p:nth-of-type(2)

:nth-child,p:nth-child(1),:nth-last-child

:nth-child(1)表示父元素中的第乙個子元素,1代表的數字就是第幾個子元素。如:nth-child(2n)其中n表示為整數

p:nth-child(1)表示父元素中的第乙個子元素且這個子元素要是p元素,如果第乙個元素不是p元素則對應的樣式不生效

:nth-last-child表示倒數,如:nth-last-child(1)就表示倒數第乙個子元素

:nth-of-type()、:nth-last-of-type()

:nth-of-type(2)表示每個型別子元素的第二個變化

p:nth-of-type(1),type表示指定型別,此就指向子元素中的第乙個p元素,不管父元素的第乙個子元素是什麼,只找p元素

p:nth-last-child(1)指向子元素中的倒數第乙個p元素,p可以替換成其他元素,1表示的是第幾個p元素

:first-child、:last-child、:first-of-type、:last-of-type

:first-child類似於:nth-child(1)表示第乙個子類,:last-child類似:nth-last-child(1)表示最後的子元素,:first-of-type類似:nth-of-type(1),:last-of-type類似:nth-last-of-type(1)

:root、:only-child、:only-of-type、:empty

:root,根元素,也是html元素表示選中html元素

:only-child,是父元素中的唯一子元素

:only-of-type,是父元素中唯一這種型別的子元素

:empty,元素內容是空的如單純的

:not

:not的格式是:not(x),x是乙個簡單的選擇器,它可以是乙個元素選擇器,類選擇器,屬性選擇器等(除否定偽類),但是他不支援組合。如:not(div,p)

body :not(div),表示body子元素中不是div的元素進行變化。

偽類和偽元素

偽元素 first letter向文字的第乙個字母新增特殊樣式 first line 向文字的第一行新增樣式 before 在元素之前新增內容 after 在元素之後新增內容 偽類 link 未被訪問的鏈結 visited 已訪問的鏈結 hover當滑鼠懸停到元素上方時 active被啟用的元素 注...

偽類和偽元素

定義 偽類和偽元素就是為文件中不一定存在的結構指定樣式,或者為某些元素 甚至文件本身 的狀態所指示的幻象類指定樣式。css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。偽類的形式 選擇符 偽類 偽元素的形式 選擇符 偽元素 css3規範中要求使用雙冒號 表示偽元素,以此來區分偽元素和偽類。鏈結偽...

偽類和偽元素

1 偽類 用於向某些選擇器新增特殊的效果,當已用元素處於某種狀態時,為其新增對應的樣式 link未訪問的連線 visited已訪問的連線 hover滑鼠移動到容器,可用於頁面的任何元素 active被啟用時的狀態,不僅限於連線 focus獲得焦點時的狀態,不僅限於連線 target first ch...