css 偽類和偽元素的用法和區別

2021-10-10 15:47:45 字數 1904 閱讀 8799

偽類側重豐富選擇器以及動態效果

偽類的語法是單個冒號帶乙個偽類名稱

:link       預設帶href屬性的a標籤的樣式

:visited 被訪問過的鏈結的樣式

:hover 滑鼠懸浮上去的樣式

:active 滑鼠按下去的時候的樣式

上面四種定義的時候需要保證這樣的順序

:focus 當前元素為focus狀態

:lang lang(en) 對應html上的lang屬性,符合的話執行樣式

:empty 選擇沒有子元素的元素執行樣式

:enable 選擇表單元素具有非disable屬性的元素,執行樣式

:disable 選擇表單元素具有disable屬性的元素。執行樣式

:checked 單選按鈕或者多選按鈕被選中的,執行樣式

:target 錨點跳轉到的內容執行樣式

:root 匹配文件的根元素。html中預設就是html元素

:default 預設狀態的表單元素,比如預設選中的下拉框,單選按鈕,多選按鈕,執行樣式

:first-of-type 選中該元素是別人首個子元素,例如p:first-of-type 就是所以元素子元素中第乙個p元素

:last-of-type 意義和上面類似,代表最後乙個

:only-of-type 代表所有元素中只有乙個該型別的元素p:only-of-type

:only-child 例如p:only-child 代表子元素中只有乙個元素,且必須是該型別p

:first-child 例如p:first-child 代表是父元素中的第乙個元素,且型別為p

:last-child 意義同上,最後乙個元素

:nth-child(n) 例如p:nth-child(2) 表示選擇子元素第二個且型別為p的元素,n從1開始算

:nth-last-child(n) 意思和上面類似,只不過是從結尾開始往前數第n個,n是從1開始算

:nth-of-type(n) 例如p:nth-of-type(2) 代表子元素中第二次出現的p元素 n從1開始算

:nth-last-of-type(n) 意義和上面類似,只不過是從尾部往前數,n從1開始算

:not() 例如 :not(p) 匹配非p元素

偽元素側重表達不在語法定義範圍內的抽象元素,比如說,首個字母或者首行、元素前面、元素後面,元素被選中的部分。

偽元素,單/雙冒號老師可以被識別的

在css3中定義了雙冒號代表偽元素,單冒號代表偽類。以此來區分偽元素和偽類。為了相容老的瀏覽器,用單冒號類表達偽元素也是能夠被識別的,比如寫:after、:before :first-line :fist-letter

::first-letter  匹配內容的首個字元

::first-line 匹配內容的首行內容

::before 匹配內容前面的部分

::after 匹配緊跟內容後面的部分

::selection 匹配使用者通過滑鼠或者其他裝置選中的內容部分

1.寫法的區別

在css3中定義了雙冒號代表偽元素,單冒號代表偽類。以此來區分偽元素和偽類。為了相容老的瀏覽器,用單冒號類表達偽元素也是能夠被識別的,比如寫:after :before :first-line :fist-letter

2.側重點的區別

偽類側重豐富選擇器的選擇語法範圍內元素的選擇能力,

偽元素側重表達或者定義不在語法定義範圍內的抽象元素。

CSS 偽類和偽元素的區別

偽類和偽元素 css3規定,偽類由乙個冒號開始,然後為偽類的名稱。例如 after 偽元素由兩個冒號開始,然後為偽元素的名稱。例如 after 偽類的概念 偽類本質上是為了彌補常規css選擇器的不足,以便獲取到更多的資訊。通常表示獲取不存在與dom樹中的資訊,或獲取不能被常規css選擇器獲取的資訊。...

css 偽類和偽類元素的區別

偽類更多的定義的是狀態,如 hover,或者說是乙個可以使用css進行修飾的特定的特殊元素,如 first child 偽類用於當已有元素處於的某個狀態時,為其新增對應的樣式,這個狀態是根據使用者行為而動態變化的。當使用者懸停在指定的元素時,我們可以通過 hover 來描述這個元素的狀態。雖然它和普...

css偽類和偽元素

css偽類用於向某些選擇器新增特殊的效果。link,visited,hover,focus,active,first child,lang css3新增的偽類 last child,only child,first of type,last of type,only of type,nth chil...