偽元素使用詳解（超詳細版）

其實無論是單引號還是雙引號，他們的本質都是偽元素，只不過因為偽類使用的也是單引號，同時他們的寫法類似，寫法也相仿，但實際上css3為了區分兩者，已經明確規定了偽類用乙個冒號來表示，而偽元素則用兩個冒號來表示。

但因為相容性的問題，所以現在大部分還是統一的單冒號，但是拋開相容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。

title>
type="text/css">
p.box
p.box
:before
style>
head>
class="box">other content.p>
body>

外面的盒子是這個段落。圍繞有雜湊符號的邊框表示偽元素的邊界。所以，不是插入「before」到段落，而是偽元素被置於到此段落的「other content」的前面。

使用after偽類清除浮動也是目前清除浮動的主流方法，其使用方式如下：

未清除浮動之前：

title>
type="text/css">
.container
.subcon
style>
head>
class="container">
class="subcon">
div>
div>
body>

使用after偽類清除浮動：

title>
type="text/css">
.container
.clear
:after
.subcon
style>
head>
class="container clear">
class="subcon">
div>
div>
body>

這個時候就要使用到zoom縮放來觸發 ie 下的haslayout,使元素根據自身內容計算寬高。

要注意：在 ie6，ie7 下，父級元素有寬高是不用清浮動的。

相容性處理：

title>
type="text/css">
.container
/*在這裡請浮動*/
.clear
:after
/*在這裡進行相容性處理*/
.clear
.subcon
style>
head>
class="container clear">
class="subcon">
div>
div>
body>

注意：是在父級上使用after偽類。

title>
type="text/css">
p.box
p.box
:before
style>
head>
class="box">other content.p>
body>

/* 使用偽元素插入 注意：url裡面的內容沒有引號*/

p:before

參考文獻一&&參考文獻二

Spring data JPA使用詳解 超詳細

目錄 jpa 元模型criteria查詢 criteriabuilder 安全查詢建立工廠 criteriaquery 安全查詢主語句 root predicate 過濾條件 predicate 多個過濾條件 spring data jpa簡介 spring data jpa是spring在orm框...

http協議詳解 超詳細

http1.基礎概念篇 http是hyper text transfer protocol 超文字傳輸協議 的縮寫。它的發展是全球資訊網協會 world wide web consortium 和internet工作小組ietf internet engineering task force 合作的...

css偽類選擇器詳細解析及案例使用 偽元素

偽元素 css3中將所有偽元素前變成了兩個冒號，即 first letter first line before after selection。目的是為了區分偽元素與偽類。對於ie6 ie8，僅支援單冒號寫法 1.first letter 用來選擇文字塊的第乙個首字母。2.first line 用...