css 偽類與偽元素以及使用其清除浮動

2021-09-27 22:28:21 字數 1371 閱讀 3112

在開發過程中經常用到偽類與偽元素清除浮動,今天就來梳理一下二者的關係與概念

先來看看官方的解釋

從w3c給的解釋可以看出偽類與偽元素概念上沒有區別,都是向css選擇器設定特殊效果。

而二者的區別,舉個例子,使用偽元素:after清除浮動後,在頁面控制台的html**中會發現乙個::after元素,簡單來說就是偽元素使用後會在頁面生成元素,而偽類不會。

:link 

/* 未訪問的鏈結 */

:visited

/* 已訪問的鏈結 */

:hover

/* 滑鼠移動到鏈結上 */

:active

/* 選定的鏈結 */

:first-child /*首個子元素*/

:last-child /*最後的子元素*/

:nth-

child

(number)

/*選擇第number個子元素*/

:focus /*向擁有鍵盤輸入焦點的元素新增樣式*/

注:偽類可以與css類配合使用

a.red:visited 

/*css***/

="red" href=

"css_syntax.asp"

>

css syntax<

/a>

/*html***/

在實際開發中最多是在清除浮動時使用偽元素,以下只列舉清除浮動的方法,還有其他方法可以在w3c中檢視

:before

/*此偽元素可以在元素之前插入內容*/

:after

/*此偽元素可以在元素之後插入內容*/

使用偽元素清除浮動的方法

:after
使用:before與:after還可以設定一些樣式

導航條樣式

實現思路:

:before作為背景,設定屬性背景等屬性

元素為透明條

:after為白色中心原點

對html標籤 元素 以及css偽類和偽元素的理解

標籤 這應該都知道。等都是標籤。元素 標籤開始到結束。比如 p之間的內容 紅色部分就是元素。元素的內容 標籤開始到結束之間的部分,上述紅色部分中的 p之間的內容 這就是元素的內容。偽類 針對的是特殊狀態的元素。偽元素 針對的是元素的內容。比較偽類和偽元素 這裡用偽類 first child和偽元素 ...

css 偽類 與 偽元素

偽類就是一種虛構的狀態或者說是一種具有特殊屬性的元素,可以使用 css 進行樣式修飾。偽類前面通常加乙個 之後跟上偽類的名字或括號裡面的值。常用的偽類 link visited hove active focus first child nth child 偽元素更像是虛擬的元素可以和 html 元...

css 偽類與偽元素

屬性 描述 link 向未被訪問的鏈結新增樣式。visited 向已被訪問的鏈結新增樣式。hover 當滑鼠懸浮在元素上方時,向元素新增樣式。active 向被啟用的元素新增樣式。focus 向擁有鍵盤輸入焦點的元素新增樣式。first child 向元素的第乙個子元素新增樣式 lang 向帶有指定...