css偽類和偽元素屬性

2022-08-17 15:36:22 字數 1509 閱讀 9436

對css中基本選擇器和屬性選擇器以及偽類選擇器做了總結,但是提到偽類,與之相對應的必然是偽元素。

那麼,,,二者到底有什麼不能說的秘密呢?接下來

先歸類下兩者

偽類的種類:

偽元素的種類:

兩者的使用方法:

css3為了區分兩者,已經明確規定了偽類用乙個冒號來表示,而偽元素則用兩個冒號來表示。

:pseudo-classes  偽類

::pseudo-elements 偽元素

但因為相容性問題,現在大部分兩者還是統一用單冒號,但拋開相容性問題,我們書寫時應盡量養成良好習慣,區分兩者。

二者區別:

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

——css偽元素用於將特殊的效果新增到某些選擇器。

但,看到這麼一句軟綿綿的話,三更半夜的我表示好難愛啊,所以

看下面演示

這裡用偽類:first-child和偽元素:first-letter來進行比較。

很明顯":first-child"新增樣式到第乙個子元素

如果我們不使用偽類,而希望達到上述效果,可以這樣做:

.one

first

second

也就是說我們給第乙個子元素新增乙個類,然後定義這個類的樣式。即可達到同樣的效果。

那麼我們接著看看偽元素:

p:first-letter 

now is 0 39 points

偽元素:first-letter新增樣式到第乙個字母。

那麼如果我們不使用偽元素,要達到上述效果,應該怎麼做呢?

如下:

span

now is 0 39 points

即我們給第乙個字母新增乙個span,然後給span增加樣式。

兩者的區別已經出來了。那就是:

偽類的效果可以通過新增乙個實際的類來達到,而偽元素的效果則需要通過新增乙個實際的元素標籤才能達到,這也是為什麼他們乙個稱為偽類,乙個稱為偽元素的原因。

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...

CSS偽類和偽元素

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

CSS 屬性 偽類和偽元素的區別

可以明確兩點,第一兩者都與選擇器相關,第二就是新增一些 特殊 的效果。這裡特殊指的是兩者描述了其他css無法描述的東西。這裡用偽類 first child和偽元素 first letter來進行比較。p i first child first second 偽類 first child 新增樣式到第...