深入理解偽元素

: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]只支援顏色和背景顏色兩個樣式

下面是偽元素的速查表

/*

typographic pseudo-elements 
*/::first-line /*
選取文字塊首行字元 
*/::first-letter /*
選取文字塊首行首個字元 
*//*
highlight pseudo-elements 
*/::selection 
/*選取文件中高亮(反白)的部分
*/::inactive-selection /*
選取非活動狀態時文件中高亮(反白)的部分
*/::spelling-error /*
選取被 ua 標記為拼寫錯誤的文字 
*/::grammar-error /*
選取被 ua 標記為語法錯誤的文字 
*//*
tree-abiding pseudo-elements 
*/::before 
/*在選中元素中建立乙個前置的子節點 
*/::after 
/*在選中元素中建立乙個後置的子節點 
*/::marker 
/*選取列表自動生成的專案標記符號 
*/::placeholder 
/*選取欄位的佔位符文字(提示資訊) 
*//*
webvtt format 
*/::cue 
/*匹配所選元素中 webvtt 提示 
*//*
fullscreen api 
*/::backdrop 
/*匹配全屏模式下的背景 
*/

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計數器

首字下沉

class="

box">

疊加效果

">

塊級元素和內聯元素深入理解

塊元素又名塊級 元素 block element 和其對應的是內聯元素 inline element 都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以後，塊元素和內聯元素的這種 屬性差異就不成為差異了。比如，我們完全可以把內聯元素加上display...

理解偽元素

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

深入理解C語言 深入理解指標

關於指標，其是c語言的重點，c語言學的好壞，其實就是指標學的好壞。其實指標並不複雜，學習指標，要正確的理解指標。指標也是一種變數，占有記憶體空間，用來儲存記憶體位址 指標就是告訴編譯器，開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時，號表示所宣告的變數為指...