CSS中的偽元素及其與偽類的區(qū)別示例介紹

我們知道隨著CSS規(guī)范進一步完善，新增的CSS偽元素越來越多，但是在日常開發(fā)中，我們常用的及瀏覽器支持情況比較樂觀的當數(shù)before和after了。但是我們在日常開發(fā)中使用的都是:after {content: ”;}來清除浮動，及新增一個元素（照顧到IE8瀏覽器這里使用單冒號）。但是content的可取值有哪些呢？
1. 字符串： content: “a string”- 注意：特殊字符必須使用unicode編碼；
2. 圖片： content: url(/path/to/benjamin.png) – 圖片以原始尺寸插入，不能調(diào)整大小。因圖片支持漸變，因此可以對偽元素使用漸變效果；
3. 無字符： content: “”- 這個在清除浮動和設置背景圖片比較有用，我們可以設置背景圖片的width和height，甚至我們可以使用background-size屬性來調(diào)整背景圖片大小；
4. 計數(shù)器： content: counter(li)- 在:marker出現(xiàn)之前，對于設置列表序號樣式比較有用；具體參見下面代碼：

ol { 
 countercounter-reset: li; 
} 
ol>li { 
 position: relative; 
 padding-left: 2em; 
 line-height: 30px; 
 list-style: none; 
} 
ol>li:before { 
 position: absolute; 
 top: 8px; 
 left: 0; 
 height: 16px; 
 width: 16px; 
 line-height: 16px; 
 text-align: center; 
 content: counter(li); 
 countercounter-increment: li; 
 border-radius: 50%; 
 background-color: #ccc; 
 font-size: 12px; 
 color: #efefee; 
}

PS：我們不能設置content: “<h2>Benjamin</h2>”，它不會解析按HTML代碼片段解析，而會解析為字符串；
5. content: attr(attrName)
content可以利用attr函數(shù)獲取屬性值，尤其使用在偽類中比較方便。見如下代碼：

<style type="text/css"> 
 .list li { 
 list-style: none; 
 margin-bottom: 20px; 
 } 
 .list li span { 
 vertical-align: middle; 
 } 
 .list li:before { 
 content: attr(data-index); 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 text-align: center; 
 color: #fff; 
 vertical-align: middle; 
 background-color: #f00; 
 border-radius: 50%; 
 } 
</style> 
<ul class="list"> 
 <li data-index="1"><span>專注前端開發(fā)和用戶體驗</span></li> 
 <li data-index="2"><span>專注前端開發(fā)和用戶體驗</span></li> 
 <li data-index="3"><span>專注前端開發(fā)和用戶體驗</span></li> 
 <li data-index="4"><span>專注前端開發(fā)和用戶體驗</span></li> 
 <li data-index="5"><span>專注前端開發(fā)和用戶體驗</span></li> 
</ul>

說了前面的話，下面說說IE中遇到的bug:
Bug描述：使用偽類實現(xiàn)”+”/”-“號圖像切換時，通過增加和移除opened類來實現(xiàn)，但是在IE8中效果怪異，無法正確渲染，其它瀏覽器中正常：

.plus { 
 position: relative; 
 display: inline-block; 
 vertical-align: top; 
 width: 20px; 
 height: 20px; 
 margin-right: 24px; 
 border: 1px solid #fdaa47; 
 border-radius: 3px; 
 overflow: hidden; 
} 
/* 橫向 */
.plus:before { 
 content: ''; 
 position: absolute; 
 top: 10px; 
 left: 3px; 
 width: 14px; 
 height: 1px; 
 background-color: #fdaa47; 
 display: block; 
} 
/* 縱向 */
.plus:after { 
 display: block; 
 content: ''; 
 width: 1px; 
 height: 14px; 
 background-color: #fdaa47; 
 position: absolute; 
 left: 10px; 
 top: 3px; 
} 
.opened:after { 
 top: -30px; 
}

當通過addClass(‘opened’)和removeClass(‘opened’),來切換加減號時：IE8瀏覽器中效果沒有達到預期，部分樣式無法覆蓋，現(xiàn)解決方案如下:

<p class="parent"> 
 <i class="plus"></i> 
</p> 
<script type="text/javascript"> 
$('.parent').on('click', function() { 
 var $i = $(this).find('i'), 
 className = $i.attr('class'); 
 className = /opened/.test(className) ? 'plus' : className +' opened'; 
 $i.replaceWith('<i class="'+ className +'""></i>'); 
}); 
</script>

偽類和偽元素的異同
1. W3C CSS 2.1 Selectors
對偽類和偽元素沒有做出區(qū)分，都是使用一個冒號
比如
偽類:first-child，
偽元素:first-line
PS：在該規(guī)范中明確提到了a鏈接的幾種偽類的書寫順序：
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the ‘color’ property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

2. CSS Selectors Level 3
該規(guī)范中為偽類和偽元素做了區(qū)分，偽類使用單冒號，偽元素開始使用雙冒號。
比如
偽類:first-child
偽元素::first-line、::first-letter、::before、::after
CSS 3在CSS2.1的基礎上增加了不少偽類:target、UI元素狀態(tài)的偽類:checked等、結構性偽類:nth-child()等，具體可以看規(guī)范。

3. CSS Selectors Level 4草案
該草案中又增加了很多新的偽類，比如與input控制狀態(tài)、值狀態(tài)、值校驗相關的偽類，樹形結構的偽類，網(wǎng)格結構的偽類等。

4. CSS Pseudo-Elements Module Level 4——W3C First Public Working Draft, 15 January 2015
增加了一些偽元素，如：
Selecting Highlighted Content: the ::selection, ::spelling-error, and ::grammar-error pseudo-elements，
Placeholder Input: the ::placeholder pseudo-element。

5. 常見應用
偽類：
1) a鏈接樣式
2) 隔行變色
偽元素：
1) 最常見的使用偽元素after清除浮動，
.fix{*zoom:1;}
.fix:after,.fix::after{display: block; content: “clear”; height: 0; clear: both; overflow: hidden; visibility: hidden;}
2) letter-spacing+first-letter實現(xiàn)按鈕文字隱藏
3) 首行、首字母樣式

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com