伪元素

一、常用的伪元素和伪类

伪元素和伪类的写法有点像，

伪元素使用2个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder等；

伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。

伪类	描述	level
:link	用来选中元素当中的链接。它将会选中所有尚未访问的链接。遵循LVHA顺序	1
:visited	表示用户已访问过的链接。遵循LVHA顺序	1
:active	匹配被用户激活的元素。即鼠标主键按下的元素或者tab键选中的元素，并不限于a和button。遵循LVHA顺序	1
:lang()	基于元素语言来匹配页面元素,eg:p:lang(en)	2
:first-child	一组兄弟元素中的第一个元素	2
:focus	表示获得焦点的元素	2
:hover	滑过元素时，pc端指鼠标，移动端指触摸（通常会有bug）	2
:target	代表一个唯一的页面元素(目标元素)。例如：http://www.example.com/index.html#section2该片段指向一个ID为section2的页面元素	3
:root	匹配文档树的根元素,除了优先级更高之外，与html选择器相同	3
:nth-child()	找到所有当前元素的兄弟元素中符合条件的元素，例如2n+1就是查找1，3，5，7等	3
:nth-of-type()	查找符合条件的相同元素类型的兄弟元素	3
:nth-last-of-type()	从后往前查找符合条件的相同类型的兄弟元素	3
:last-child	一组兄弟元素中的最后一个元素	3
:first-of-type	一组兄弟元素中的具有相同元素类型的第一个元素	3
:last-of-type	一组兄弟元素中的具有相同元素类型的最后一个元素	3
:only-child	唯一的一个子元素	3
:only-of-type	代表了任意一个元素，这个元素没有其他相同类型的兄弟元素	3
:empty	代表没有子元素的元素，子元素有空格和文本都不行，但可以是注释	3
:not()	它匹配不符合参数选择器描述的元素，不能包含另一个not选择器	3
:enabled	表示任何启用的（enabled）元素。如果一个元素能够被激活或获取焦点，则该元素是启用的	3
:disabled	表示任何被禁用的元素	3
:checked	表示任何处于选中状态的radio/checkbox	3
:indeterminate	表示状态不确定的表单元素	3
:default	表示一组相关元素中的默认表单元素	3
:valid	表示任意内容通过验证的<input>或其他 <form>元素	3
:invalid	表示任意内容未通过验证的<input>或其他 <form>元素	3
:in-range	代表一<input> 元素，其当前值处于属性min 和max 限定的范围之内	3
:out-of-range	代表一个<input>元素，其当前值处于属性min 和max 限定的范围外	3
:required	表示任意拥有required属性的<input> 或<textarea>	3
:optional	表示任意没有required属性的 <input>``<select>或<textarea>	3
:read-only	表示元素不可被用户编辑的状态	3
:read-write	代表一个元素可以被用户编辑	3

伪元素	功能描述	level
::after	用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素	2
::before	创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。	2
::first-letter	选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容	1
::first-line	在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小	1
::selection	应用于文档中被用户高亮的部分	4，WD草案

 

二、伪元素属性和样式

1.content属性

      每个伪元素必须要有content属性，否则的话浏览器不能识别，你可以为content属性添加空引用作为它的值(即:content:"")。

      你也可以为content包含一个指向一个图像的URL，就像在css里包含一个背景图像一样：

p:before {

  content: url(image.jpg);
}

      也可以包含一个Data URI代替图像引用，就像使用css背景一样。

      你还可以选择ATRR(X)中的函数的形式。“把X属性的值以字符串的形式返回”，比如：

a:after {
  content: attr(href);
}

      attr()函数的功能是把得到特定属性的值并把它作为插入的文本成为一个伪元素。

      上面的代码会导致页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。

2.标签属性

      伪元素也是元素，所以你可以为它添加大部分其他元素具有的属性，比如定位属性，字体属性，背景属性和盒模型的属性等，另外由于伪元素默认是内联元素，所以如果要使得盒模型中的height等属性有效的话，必须要把它转化为块元素，具体就是设置其display属性为block,或者设置为float等。如下：

#example:after{
    position: absolute;
    display: block;
    left: 20px;
    top: 20px;
    content: """;
     20px;
    height: 20px;
    background: #6F3;
}

      既然伪元素可以定义position等属性，那么before和after的约束就很有限了，before和after的区别只能是在没有特殊定义伪元素的位置等信息的时候的默认行为不一致，before出现在相对绑定的元素之前，而after出现在相对绑定的元素位置之后。

      另外既然可以为伪元素定义盒子模型的属性，就不得不说，伪元素默认为其目标元素的子元素，比如#example:after，伪元素after的父元素就是#example选择符对应的元素，它具有一般子元素盒模型的特性，即为他定义的height和width等属性规则为影响目标元素的规则。

三、伪元素的兼容性

基本可以放心的使用伪元素，因为它有很好的兼容性，可以不用加浏览器前缀而很好的使用它。

支持:before 和 :after 伪元素的浏览器有：

• Chrome 2+,
• Firefox 3.5+ (3.0 had partial support),
• Safari 1.3+,
• Opera 9.2+,
• IE8+ (with some minor bugs),
• 几乎所有的移动浏览器。

      但是IE6和IE7上并不支持，如果不是很在意他们的用户数量的话，基本可以很自由的使用啦。

四、伪元素的缺点

上面说了，伪元素是通过样式来达到元素效果的，也就是说伪元素不占用dom元素节点，引用:before,:after伪元素妙用里面总结的，:before和:after伪元素的主要特点如下：

• 伪元素不属于文档，所以js无法操作它

• 伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件

• 原文说块级元素才能有:before, :after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。

• 诸如 <input />、 <iframe />等不能包含子元素的标签，不支持 ::before 和 ::after

基于伪元素的特点可以知道其优缺点：

• 优点

  • 减少dom节点数
  • 让css帮助解决部分js问题，让问题变得简单

• 缺点

  • 不利于SEO
  • 无法审查元素，不利于调试

 注意： ::before和:before写法是等效的，:befor是Css2的写法，::before是Css3的写法。:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好