偽元素
我們知道隨著CSS規格進一步完善，新增的CSS偽元素越來越多，但是在日常開發中，我們常用的及瀏覽器支援情況比較樂觀的當數before和after了。但我們在日常開發中使用的都是:after {content: 」;}來清除浮動，及新增一個元素（照顧到IE8瀏覽器這裡使用單冒號）。但是content的可取值有哪些呢？
1. 字串： content: “a string”- 注意：特殊字元必須使用unicode編碼；
2. 圖片： content: url(/path/to/benjamin.png) – 圖片以原始尺寸插入，無法調整大小。 height，甚至我們可以使用background-size屬性來調整背景圖片大小；
4. 計數器： content: counter(li)- 在:marker出現之前，對於設定列表序號樣式比較有用；具體請參閱下面程式碼：
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;
}5. content: attr(attrName)
content可以利用attr函數取得屬性值，尤其使用在偽類別中比較方便。說了前面的話，下面說說IE中遇到的bug:
Bug描述：使用偽類實現”+”/”-“號圖像切換時，通過增加和移除opened類來實現，但是在IE8中效果怪異，無法正確渲染，其它瀏覽器中正常：
<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>专注前端开发和用户体验</span></li>
<li data-index="2"><span>专注前端开发和用户体验</span></li>
<li data-index="3"><span>专注前端开发和用户体验</span></li>
<li data-index="4"><span>专注前端开发和用户体验</span></li>
<li data-index="5"><span>专注前端开发和用户体验</span></li>
</ul>#當透過addClass('opened')和removeClass('opened'),來切換加減號時：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;
}1. W3C CSS 2.1 Selectors
對偽類和偽元素沒有做出區分，都是使用一個冒號
例如偽類:first-child，偽元素:first-line
PS：在該規範中明確提到了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 eactates and both 顏色hovers over the A element.
2. CSS Selectors Level 3
該規範中為偽類和偽元素做了區分，偽類使用單冒號，偽元素開始使用雙冒號。
例如
偽元素::first-line、::first-letter、::before、::afterCSS 3在CSS2.1的基礎上增加了不少偽類:target、UI元素狀態的偽類:checked等、結構性偽類:nth-child()等，具體可以看規範。
3. CSS Selectors Level 4草案
該草案中又增加了許多新的偽類，例如與input控制狀態、值狀態、值校驗相關的偽類，樹狀結構的偽類，網格結構的偽類等。
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，
5. 常見應用程式
偽類別：
1) a連結樣式
偽元素：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實作按鈕文字隱藏
3) 首行、首字母樣式
以上是CSS中的偽元素及其與偽類的差異範例介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
