偽元素 偽類

2021-08-01 09:46:54 字數 762 閱讀 3936

偽元素在dom中建立了一些抽象元素,而且這些元素本身時不存在與dom中的。在css3中偽元素前要使用::(兩個冒號)。

比如

使用在使用::before  和 ::after時,要使用content進行內容設定。預設情況下,偽元素插入的內容為行內元素,不過可以使用display進行設定。

注意:同時只能使用乙個偽元素

偽類是用來獲取dom中不存在的資訊(比如的link,hover,visited等狀態),或者獲取常規css選擇器不能獲取的資訊(比如偽類:target)。

部分偽類如下:

使用偽類可以和很方便地根據已有的dom元素對目標元素進行選擇。可以使選擇更加靈活,同時減少了類和id的使用。

比較典型的例子是通過使用偽類nth-child(n)選擇屬於父元素的第n個子元素。

p:nth-child(3)

p:nth-child(2n)

上面的**將dom中所有p元素中第三個子元素字型顏色設定為黑色。然後又將所有p元素的偶數個子元素字型顏色設定為紅色。

注意:可以同時使用多個偽類。

偽元素相當於無中生有,建立乙個空的元素,然後將內容新增進去。而偽類則是用來彌補css選擇器的不足,它使選擇更靈活,**更簡潔。

偽類 偽元素

偽類和偽元素在web開發中用的好的話,可以說猶如神助。但一定要分清楚,什麼是偽類,什麼是偽元素。如何區分偽元素與偽類?答 偽元素在html文件渲染後,頁面中有相應的內容顯示,同時能夠設定它的樣式,而偽類只能設定樣式 偽元素和元素的區別?答 很明顯,從字面意思上來說,偽元素就不是真正的元素,而只有形而...

偽類 偽元素

偽類和偽元素 偽類其實是為彌補css選擇器的不足,用來更方便地獲取資訊 而偽元素本質上是建立了乙個虛擬容器 元素 我們可以在其中新增內容或樣式 css3中,偽類用單冒號 表示 而偽元素用雙冒號 表示 before 偽元素可以在元素的內容前面插入新內容 after 偽元素以在元素的內容之後插入新內容 ...

css偽類,偽元素

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