深入理解虛擬元素，深入理解偽

深入理解虛擬元素，深入理解偽
目錄[1]定義[2]用法 first-letter first-line before after selection [3]重點[4]DEMO 首字下沉 釘子效果 圖片疊加效果定義

　　虛擬元素顧名思義偽裝成元素，但不是元素，這與產生內容相關。產生內容主要指由瀏覽器建立的內容，而不是由標誌或內容來表示。產生內容主要由:before和:after虛擬元素來實現，當然虛擬元素還包括:first-line,:first-letter和::selection　　

 

用法:first-letter(IE6-瀏覽器不支援)

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

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

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

div:first-letter{color: red;}

:first-line(IE6-瀏覽器不支援)

　　設定元素中第一行文本的樣式

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

div:first-line{color: red;}    

:before(IE7-瀏覽器不支援)

　　在元素內容的最開始插入產生內容

　　[注意]預設這個虛擬元素是行內元素,且繼承元素可繼承的屬性

div:before{content:"首碼"}

:after(IE7-瀏覽器不支援)

　　在元素內容的最後插入產生內容

　　[注意]預設這個虛擬元素是行內元素,且繼承元素可繼承的屬性

div:after{content:"尾碼"}

::selection(IE8-瀏覽器不支援)

　　匹配被使用者選擇的部分

　　[注意1]firefox瀏覽器需要添加-moz-首碼

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

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

div::selection{color: red;}

 

重點【content屬性】

　　content屬性應用於before和after虛擬元素

content:normal;(預設)content:<string>|<uri>|attr(<identifier>)

【1】<string>裡面的內容會原樣顯示，即使包含某種標記也不例外。

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

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

div:before{    content: "第一段\              第二段";}div:after{    content:"\A尾碼";}

【2】<uri>

div:before{    content: url("arrow.gif");}

【3】attr(<identifier>)

div:before{    content: attr(data-before);}

<補充>【quotes屬性】

　　　　管理引號

前單引號 -> \2018後單引號 -> \2018前雙引號 -> \201C後雙引號 -> \201D

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

【4】open-quote|close-quote

<style>div{    display: inline-block;    quotes: '201C' '201D' '2018' '2019' '201C' '201D';}div:before{    content: open-quote;}div:after{    content: no-close-quote;}</style>

<div>    最外層<div>            次外層            <div>                最裡層            </div>          </div></div>    

【5】counter

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

 

DEMO首字下沉

<style>div{    width: 200px;    border: 1px solid black;    text-indent: 0.5em;}div:first-letter{    font-size: 30px;    float: left;}  

 

釘子效果

<style>/*使用before虛擬元素畫圓*/.box:before{    display:block;    content:"釘子";    height: 50px;    width: 50px;    border-radius: 50%;    background-color: black;    color: white;    font-weight:bold;    text-align: center;    line-height: 50px;}/*使用after虛擬元素畫三角*/.box:after{    display: block;    content: "";    width: 0;    height: 0;    border: 25px solid transparent;    border-top: 50px solid black;    margin-top: -20px;}</style>

<div class="box"></div>

 

圖片疊加效果

<style>body{    margin: 0;}    .box{    position:relative;    margin: 30px auto 0;    width: 300px;}.box-img{    position: absolute;    z-index:1;    border: 5px solid gray;    }.box:before,.box:after{    content:"";    position: absolute;        background-color: #D5B07C;    width: 300px;    height: 200px;    border: 5px solid gray;}.box:before{    left: -10px;    top: 0;    transform: rotate(-5deg);}.box:after{    top: 4px;    left: 0;    transform: rotate(4deg);}</style>

<div class="box">    <img class="box-img" src="diejia.jpg" alt="圖片疊加效果"></div>