解析CSS中的偽元素及其與偽類的區(qū)別

偽元素
我們知道隨著CSS規(guī)范進(jìn)一步完善,新增的CSS偽元素越來(lái)越多,但是在日常開(kāi)發(fā)中,我們常用的及瀏覽器支持情況比較樂(lè)觀的當(dāng)數(shù)before和after了。但是我們?cè)谌粘i_(kāi)發(fā)中使用的都是:after {content: ”;}來(lái)清除浮動(dòng),及新增一個(gè)元素(照顧到IE8瀏覽器這里使用單冒號(hào))。但是content的可取值有哪些呢?
1. 字符串: content: “a string”- 注意:特殊字符必須使用unicode編碼;
2. 圖片: content: url(/path/to/benjamin.png) – 圖片以原始尺寸插入,不能調(diào)整大小。因圖片支持漸變,因此可以對(duì)偽元素使用漸變效果;
3. 無(wú)字符: content: “”- 這個(gè)在清除浮動(dòng)和設(shè)置背景圖片比較有用,我們可以設(shè)置背景圖片的width和height,甚至我們可以使用background-size屬性來(lái)調(diào)整背景圖片大??;
4. 計(jì)數(shù)器: content: counter(li)- 在:marker出現(xiàn)之前,對(duì)于設(shè)置列表序號(hào)樣式比較有用;具體參見(jià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:我們不能設(shè)置content: “<h2>Benjamin</h2>”,它不會(huì)解析按HTML代碼片段解析,而會(huì)解析為字符串;
5. content: attr(attrName)
content可以利用attr函數(shù)獲取屬性值,尤其使用在偽類中比較方便。見(jiàn)如下代碼:
- <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>專注前端開(kāi)發(fā)和用戶體驗(yàn)</span></li>
- <li data-index="2"><span>專注前端開(kāi)發(fā)和用戶體驗(yàn)</span></li>
- <li data-index="3"><span>專注前端開(kāi)發(fā)和用戶體驗(yàn)</span></li>
- <li data-index="4"><span>專注前端開(kāi)發(fā)和用戶體驗(yàn)</span></li>
- <li data-index="5"><span>專注前端開(kāi)發(fā)和用戶體驗(yàn)</span></li>
- </ul>
說(shuō)了前面的話,下面說(shuō)說(shuō)IE中遇到的bug:
Bug描述:使用偽類實(shí)現(xiàn)”+”/”-“號(hào)圖像切換時(shí),通過(guò)增加和移除opened類來(lái)實(shí)現(xiàn),但是在IE8中效果怪異,無(wú)法正確渲染,其它瀏覽器中正常:
- .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;
- }
當(dāng)通過(guò)addClass(‘opened’)和removeClass(‘opened’),來(lái)切換加減號(hào)時(shí):IE8瀏覽器中效果沒(méi)有達(dá)到預(yù)期,部分樣式無(wú)法覆蓋,現(xiàn)解決方案如下:
- <div class="parent">
- <i class="plus"></i>
- </div>
- <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
對(duì)偽類和偽元素沒(méi)有做出區(qū)分,都是使用一個(gè)冒號(hào)
比如
偽類: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ū)分,偽類使用單冒號(hào),偽元素開(kāi)始使用雙冒號(hào)。
比如
偽類:first-child
偽元素::first-line、::first-letter、::before、::after
CSS 3在CSS2.1的基礎(chǔ)上增加了不少偽類:target、UI元素狀態(tài)的偽類:checked等、結(jié)構(gòu)性偽類:nth-child()等,具體可以看規(guī)范。
3. CSS Selectors Level 4草案
該草案中又增加了很多新的偽類,比如與input控制狀態(tài)、值狀態(tài)、值校驗(yàn)相關(guān)的偽類,樹(shù)形結(jié)構(gòu)的偽類,網(wǎng)格結(jié)構(gòu)的偽類等。
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. 常見(jiàn)應(yīng)用
偽類:
1) a鏈接樣式
2) 隔行變色
偽元素:
1) 最常見(jiàn)的使用偽元素after清除浮動(dòng),
.fix{*zoom:1;}
.fix:after,.fix::after{display: block; content: “clear”; height: 0; clear: both; overflow: hidden; visibility: hidden;}
2) letter-spacing+first-letter實(shí)現(xiàn)按鈕文字隱藏
3) 首行、首字母樣式
相關(guān)文章
詳解如何使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器
這篇文章主要介紹了詳解如何使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面2020-01-06- 這篇文章主要介紹了詳解CSS中的偽類與偽元素及二者間的區(qū)別,實(shí)際上CSS3中規(guī)范了一種簡(jiǎn)單粗暴的方法,即偽類前用一個(gè)冒號(hào)表示,而偽元素前用兩個(gè)冒號(hào)表示,這樣就不容易混淆了,2016-04-28
- 本文向大家展示了CSS的偽類與偽元素,介紹的非常全面,這里推薦給大家參考下。2014-12-04
- 偽類和偽元素不是真正意義上的html存在的類和元素,他們的存在是為了方便對(duì)狀態(tài)和位置進(jìn)行樣式定義。具體他們之間有什么區(qū)別呢,這就是今天我們需要討論的問(wèn)題了2014-11-23
- 無(wú)論是偽類還是偽元素,都屬于CSS選擇器的范疇。所以它們的定義可以在CSS標(biāo)準(zhǔn)的選擇器章節(jié)找到。分別是 CSS2.1 Selectors 和 CSS Selector Level 3,兩者都已經(jīng)是推薦標(biāo)準(zhǔn)2014-09-04
- CSS偽類及偽元素選擇器,如超鏈接的a:link、a:visited、a:hover等等,本文整理了一些,喜歡的朋友可以收藏下2013-11-27
- css偽類偽元素域高級(jí)選擇器的介紹,需要的朋友可以參考一下2013-02-26
CSS偽類與CSS偽元素的區(qū)別及由來(lái)具體說(shuō)明
關(guān)于兩者的區(qū)別,其實(shí)是很古老的問(wèn)題.這里著重寫的是為什么這兩者不同,以及一些平時(shí)容易錯(cuò)過(guò)的細(xì)節(jié),需要的朋友可以參考下2012-12-07- 這篇文章主要介紹了淺談CSS 偽元素&偽類的妙用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-09-01