理解偽元素

:first-letter

指定乙個元素第乙個字母的樣式

[注意1]所有前導標點符號應與第乙個字母一同應用該樣式

[注意2]只能與塊級元素關聯

[注意3]只有當選擇器部分和左大括號之間有空格時，ie6-瀏覽器才支援。因為first-letter中存在連線符的原因

div:first-letter

[注意1]只能與塊級元素關聯

[注意2]只有當選擇器部分和左大括號之間有空格時，ie6-瀏覽器才支援。因為first-line中存在連線符的原因

:before(ie7-瀏覽器不支援)在元素內容的最開始插入生成內容

[注意]預設這個偽元素是行內元素，且繼承元素可繼承的屬性；ie7-瀏覽器中必須宣告!doctype，否則不起作用

div:before

[注意]預設這個偽元素是行內元素，且繼承元素可繼承的屬性；ie7-瀏覽器中必須宣告!doctype，否則不起作用

::selection(ie8-瀏覽器不支援)匹配被使用者選擇的部分

[注意1]firefox瀏覽器需要新增-moz-字首

[注意2]只支援雙冒號寫法

[注意3]只支援顏色和背景顏色兩個樣式

【content屬性】

content屬性應用於before和after偽元素

content:normal;(預設)

content:||attr()

[注意1]如果希望生成內容中有乙個換行，則需要使用\a

[注意2]若是乙個很長的串，需要它拆分成多行則需要用\對換行符轉義

《補充》【quotes屬性】

管理引號

前單引號 -> \2018後單引號 -> \2018前雙引號 -> \201c

後雙引號 -> \201d

quotes:'201c' '201d' '2018' '2019';//第乙個值定義最外層開始引號(open-quote),第二個串定義最外層結束引號(close-quote)，第三個值定義次外層開始引號，第四個值定義次外層結束引號，第五個值定義次次外層開始引號，第六個值定義次次外層結束引號……

最外層次外層            最裡層            

關於counter屬性值，詳見深入理解css計數器

首字下沉

理解的偽類 偽元素

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

深入理解偽元素

first letter 指定乙個元素第乙個字母的樣式 注意1 所有前導標點符號應與第乙個字母一同應用該樣式 注意2 只能與塊級元素關聯 注意3 只有當選擇器部分和左大括號之間有空格時，ie6 瀏覽器才支援。因為first letter中存在連線符的原因 div first letter first...

理解偽元素 Before 和 After

層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 你一定聽說過這個詞，尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章 事實上，的確有一些css家族...