偽類和偽元素的區別

2021-08-26 08:12:02 字數 1463 閱讀 3664

在css1和css2中對偽類和偽元素的定義沒有太大區別,都是:開頭。css3定義的比較明顯。

偽類:用於選擇dom樹上元素不同的狀態(:visited :link),或者是dom上無法用簡單選擇器選擇的元素(:first-child)。(元素本身)偽類用乙個:

偽類:active 選擇正在被啟用的元素 1

:hover 選擇被滑鼠懸浮著元素 1

:link 選擇未被訪問的元素 1

:visited 選擇已被訪問的元素 1

:first-child 選擇滿足是其父元素的第乙個子元素的元素 2

:lang 選擇帶有指定 lang 屬性的元素 2

:focus 選擇擁有鍵盤輸入焦點的元素 2

:enable 選擇每個已啟動的元素 3

:disable 選擇每個已禁止的元素 3

:checked 選擇每個被選中的元素 3

:target 選擇當前的錨點元素 3

:first-of-type 選擇滿足是其父元素的第乙個某型別子元素的元素 3

:last-of-type 選擇滿足是其父元素的最後乙個某型別子元素的元素 3

:only-of-type 選擇滿足是其父元素的唯一乙個某型別子元素的元素 3

:nth-of-type(n) 選擇滿足是其父元素的第n個某型別子元素的元素 3

:nth-last-of-type(n) 選擇滿足是其父元素的倒數第n個某型別的元素 3

:only-child 選擇滿足是其父元素的唯一乙個子元素的元素 3

:last-child 選擇滿足是其父元素的最後乙個元素的元素 3

:nth-child(n) 選擇滿足是其父元素的第n個子元素的元素 3

:nth-last-child(n) 選擇滿足是其父元素的倒數第n個子元素的元素 3

:empty 選擇滿足沒有子元素的元素 3

:in-range 選擇滿足值在指定範圍內的元素 3

:out-of-range 選擇值不在指定範圍內的元素 3

:invalid 選擇滿足值為無效值的元素 3

:valid 選擇滿足值為有效值的元素 3

:not(selector) 選擇不滿足selector的元素 3

:optional 選擇為可選項的表單元素,即沒有「required」屬性 3

:read-only 選擇有」readonly」的表單元素 3

:read-write 選擇沒有」readonly」的表單元素 3

:root 選擇根元素 3

偽元素::first-letter 選擇指定元素的第乙個單詞 1

::first-line 選擇指定元素的第一行 1

::after 在指定元素的內容前面插入內容 2

::before 在指定元素的內容後面插入內容 2

::selection 選擇指定元素中被使用者選中的內容 3

reference

偽類和偽元素區別

偽類是向某些選擇器新增特殊的效果,可以通過新增乙個類來達到,用乙個冒號來表示。pseudo classes 如 first child,link visiter hover active focus lang 偽類類似於class,表示一些元素的狀態,但無需標識的分類。偽元素是將特殊的效果新增到某些...

偽類和偽元素的區別

個人的關注點可能主要集中在js方向上,但是本著css也不能丟掉的原則,所以上網查了些css方面的困惑點,這一篇的主題是 偽類和偽元素。偽類和偽元素的根本區別在於 它們是否創造了新的元素 抽象 從我們模仿其意義的角度來看,如果需要新增新元素加以標識的,就是偽元素,反之,如果只需要在既有元素上新增類別的...

偽類和偽元素的區別

學習這麼長時間對於一些基本點還是不太理解,所以在這裡進行了區分 第一種理解偽類用於向某些選擇器新增特殊的效果。偽元素用於將特殊的效果新增到某些選擇器。第二種理解 偽類的效果可以通過新增乙個實際的類來達到,而偽元素的效果則需要通過新增乙個實際的元素才能達到,這也是為什麼他們乙個稱為偽類,乙個稱為偽元素...