css偽類和偽元素

2021-10-01 17:58:21 字數 997 閱讀 1609

css偽類用於向某些選擇器新增特殊的效果。

:link, :visited, :hover, :focus, :active, :first-child, :lang

css3新增的偽類：

:last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :root, :empty, :target, :enabled, :disabled, :checked, :not(selector),

css偽元素用於向某些選擇器設定特殊效果。

::first-letter, ::first-line, ::before, ::after

css3新增的偽元素

::selection

為了避免大家混淆偽類和偽元素，css3中的標準規定偽類使用單冒號「:」 ，偽元素使用雙冒號「::」，但在此之前都使用的單冒號「:」，所以為了保證相容偽元素兩種使用方法都是可以的。

偽類可以疊加使用，而偽元素在乙個選擇器中只能出現一次，並且只能出現在末尾。

.box:first-child:hover    //使用偽類


.box:first-letter //使用偽元素


.box:first-letter:hover //錯誤寫法
偽類與類優先順序相同，偽元素與標籤優先順序相同。順便說一下優先順序怎麼判斷，一般是 !important > 行內樣式》 id選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性。還有乙個簡單的計算方法，內聯樣式表的權值為 1000，id 選擇器的權值為 100，class 類選擇器的權值為 10，html 標籤選擇器的權值為 1，權值實際並不是按十進位制計算的，用數字表示只是說明思想，我們可以把選擇器中規則對應做加法，比較權值大小，權值越大優先順序越高，如果權值相同前面的樣式會被後面的覆蓋。

CSS偽類和偽元素

css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。也就是說，偽類和偽元素是用來修飾不在文件樹中的部分，比如，一句話中的第乙個字母，或是列表中的第乙個元素，又或者是滑鼠懸停在某個超連結上時要設定的樣式。常見的狀態偽類主要包括 link 應用於未被訪問過的鏈結 hover 應用於滑鼠懸停到的元素 ...

css偽類，偽元素

偽類作用於整個元素，比如 a link a hover div first child 儘管這些條件都不是基於dom的，但結果沒乙個都是作用於乙個完整的元素，比如整個鏈結，段落，div等等 偽元素作用於元素一部分，比如 p first line p first letter 偽元素作用於元素的一部分...

CSS偽類 偽元素

css偽類用於向某些選擇器新增特殊的效果。錨偽類a link 未訪問的鏈結 a visited 已訪問的鏈結 a hover 滑鼠移動到鏈結上 a active 選定的鏈結 注意 1 在 css 定義中，a hover 必須被置於 a link 和 a visited 之後，才是有效的。2 在 cs...