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

標籤：

這應該都知道。

、、 等都是標籤。

元素：標籤開始到結束。比如:

p之間的內容

，紅色部分就是元素。

元素的內容：標籤開始到結束之間的部分，上述紅色部分中的「p之間的內容」，這就是元素的內容。

偽類：針對的是特殊狀態的元素。

偽元素：針對的是元素的內容。

比較偽類和偽元素：

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

偽類:

偽類:first-child新增樣式到第乙個子元素

p>i:first-child 
first
second

.first-child firsti>

secondi>
p>

偽元素:

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

p:first-letter 
i am stephen lee.

.first-letter ispan> am stephen lee.p>

兩者的區別就是：

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

偽元素和偽類之所以難以分清，是因為他們的效果類似並且寫法相仿，css3為了區分兩者，已經明確規定了偽類用乙個冒號來表示，而偽元素則用兩個冒號來表示。

偽類的語法：selector:pseudo-class

偽元素的語法：selector::pseudo-element

但因為相容性的問題，所以現在大部分還是統一的單冒號。

參考：

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

在開發過程中經常用到偽類與偽元素清除浮動，今天就來梳理一下二者的關係與概念 先來看看官方的解釋 從w3c給的解釋可以看出偽類與偽元素概念上沒有區別，都是向css選擇器設定特殊效果。而二者的區別，舉個例子，使用偽元素 after清除浮動後，在頁面控制台的html 中會發現乙個 after元素，簡單來說...

HTML的塊級元素以及內聯元素

html的塊級元素以及內聯元素 塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊，它只能用來容納其他塊元素。如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元...

css塊元素和行內元素以及屬性詳解

div css layout的主要標籤 dl 定義列表 h1 h6 標題 p 段落 table ul 非排序列表 特點 會自動佔據一定矩形空間，可以通過設定高度 寬度 內外邊距等屬性，來調整的這個矩形的樣子 內聯元素 inline element a 超連結 span 常用內聯容器，定義文字內區塊 ...