偽類側重豐富選擇器
以及動態效果
偽類的語法是單個冒號帶乙個偽類名稱。
: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...