伪类和伪元素的区别

阅读更多

【前言】

    本文简单说明下伪类和伪元素的区别。在CSS1，CSS2中，大家或多或少的用过 :hover，:visited, :before, :after。CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。

 

【主体】

    （1）概括：伪类与伪元素的本质区别就是是否抽象创造了新元素；可以同时使用多个伪类，而只能同时使用一个伪元素；

    （2）定义：

             首先先来看看伪类与伪元素的定义 ，w3c中对于它们是这么解释的

 

伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器

 

    （3）详细解析：

           【1】伪类：

            首先来说下伪类，CSS 伪类用于向某些选择器添加特殊的效果。它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到 。例如我们常见的几个超链接伪类

a:link {color: #FF0000}      /* 未访问的链接 */
a:visited {color: #00FF00}   /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */ 

            小结：由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

 

          【2】伪元素：

           接下来说下伪元素，简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

           ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动。

.clearfix::after{
    content: '.';
    diaplay:block;
    width: 0;
    height:0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}//zoom(IE转有属性)可解决ie6,ie7浮动问题 

 

    （4）通俗解析

    这个区别我们需要一个例子来理解

 

    This
    is a text

 

  

    如果我们想要第一个em标签字体颜色变红怎么做呢 ？？？使用我们熟悉的伪类很简单

 

em:first-child {
    color: red;
}

 

   

    但是如果不存在伪类我们怎么做呢？？？这是我们就需要为第一个em标签添加类

    This
    is a text

em.first-child {
    color: red;
}

   可以实现同样的效果

    This
    is a text

   还是这个例子 。现在我想让这个段落的第一个字母变红 ，怎么做呢 ？？？
   这回我们需要使用伪元素

p::first-letter {
    color: red;
}

   

    同样假设伪元素不存在的情况 ，这时我们只能嵌套span标签来实现

    This
    is a text

p span {
    color: red;
}

    看到这里，相信大家已经清楚了为什么一个叫做伪类，一个叫做伪元素 。伪类的效果可以通过添加实际的类来实现 ，伪元素的效果可以通过添加实际的元素来实现 。它们的本质区别就是是否抽象创造了新元素

 

常用伪元素

:first-letter：向文本的第一个字母添加特殊样式。　
:first-line:　向文本的首行添加特殊样式。　
:before：在元素之前添加内容。　 
:after：在元素之后添加内容。　 
::placeholder：匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。
::selection：CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）　 
::backdrop(处于试验阶段)：用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式 

 

.