伪元素和伪类选择器

李瑞云

2016.7.18

伪类选择器



伪元素选择器

伪类选择器和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

伪元素的效果是需要通过添加一个实际的元素才能达到的。

伪元素

伪类

CSS Selector Level 3 为了区分这两者的混淆，而特意用冒号加以区分：
伪类用一个冒号表示 :first-child
伪元素则使用两个冒号表示 ::first-line

伪元素在一个选择器里只能出现一次，并且只能出现在末尾。实则，伪元素是选中了某个元素的符合逻辑的某个实际却不存在的部分，所以应用中也不会有人将其误写成多个。伪类则是像真正的类一样发挥着类的作用，没有数量上的限制，只要不是相互排斥的伪类，也可以同时使用在相同的元素上。

伪类和伪元素使用上需要注意的地方 

            .clearfix:before,
            .clearfix:after {
                 content: ".";
                 display: block;
                 height: 0;
                 visibility: hidden;
              }
             .clearfix:after {clear: both;}
             .clearfix {zoom: 1;}

目前我们主要使用的伪类

相关博客

http://www.w3cplus.com/css3/pseudo-element-roundup.html

https://segmentfault.com/a/1190000000657084

结论

伪元素很酷同时也是可应用到实际工作中的，基本上，每一个我们所添加的元素都不会干扰现有的HTML结构，而且伪元素可以做到 几乎所有我们能想到的事情。

实际上有一些伪元素的改进工作,目前逐步进行，比如伪元素嵌套div::before::before { content: ”; }以及多重伪元素div::before(3) { content: ”; }。很显然，在未来的web设计中，这些改进会让我们的设计有更多的形式（更多的可能性）。然而，他们将会在最新的浏览器中得到支持，让我们现在耐心的等待吧！