解析CSS中的伪元素及其与伪类的区别_ Div+Css教程-查字典教程网

解析CSS中的伪元素及其与伪类的区别

摘要：伪元素我们知道随着CSS规范进一步完善，新增的CSS伪元素越来越多，但是在日常开发中，我们常用的及浏览器支持情况比较乐观的当数before和...

伪元素

我们知道随着CSS规范进一步完善，新增的CSS伪元素越来越多，但是在日常开发中，我们常用的及浏览器支持情况比较乐观的当数before和after了。但是我们在日常开发中使用的都是:after {content: ”;}来清除浮动，及新增一个元素（照顾到IE8浏览器这里使用单冒号）。但是content的可取值有哪些呢？

1. 字符串： content: “a string”- 注意：特殊字符必须使用unicode编码；

2. 图片： content: url(/path/to/benjamin.png) – 图片以原始尺寸插入，不能调整大小。因图片支持渐变，因此可以对伪元素使用渐变效果；

3. 无字符： content: “”- 这个在清除浮动和设置背景图片比较有用，我们可以设置背景图片的width和height，甚至我们可以使用background-size属性来调整背景图片大小；

4. 计数器： content: counter(li)- 在:marker出现之前，对于设置列表序号样式比较有用；具体参见下面代码：

CSS Code复制内容到剪贴板 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函数获取属性值，尤其使用在伪类中比较方便。见如下代码：

CSS Code复制内容到剪贴板 <styletype="text/css"> .listli{ list-style:none; margin-bottom:20px; } .listlispan{ vertical-align:middle; } .listli: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> <ulclass="list"> <lidata-index="1"><span>专注前端开发和用户体验</span></li> <lidata-index="2"><span>专注前端开发和用户体验</span></li> <lidata-index="3"><span>专注前端开发和用户体验</span></li> <lidata-index="4"><span>专注前端开发和用户体验</span></li> <lidata-index="5"><span>专注前端开发和用户体验</span></li> </ul>

说了前面的话，下面说说IE中遇到的bug:

Bug描述：使用伪类实现”+”/”-“号图像切换时，通过增加和移除opened类来实现，但是在IE8中效果怪异，无法正确渲染，其它浏览器中正常：

CSS Code复制内容到剪贴板 .plus{ position:relative; display:inline-block; vertical-align:top; width:20px; height:20px; margin-right:24px; border:1pxsolid#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浏览器中效果没有达到预期，部分样式无法覆盖，现解决方案如下:

JavaScript Code复制内容到剪贴板 <divclass="parent"> <iclass="plus"></i> </div> <scripttype="text/javascript"> $('.parent').on('click',function(){ var$i=$(this).find('i'), className=$i.attr('class'); className=/opened/.test(className)?'plus':className+'opened'; $i.replaceWith('<iclass="'+className+'""></i>'); }); </script>

伪类和伪元素的异同

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 when the user both activates and hovers over the A element.

2. CSS Selectors Level 3

该规范中为伪类和伪元素做了区分，伪类使用单冒号，伪元素开始使用双冒号。

比如

伪类:first-child

伪元素::first-line、::first-letter、::before、::after

CSS 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，

Placeholder Input: the ::placeholder pseudo-element。