玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深刻浅出[原创][5+3时代]

在个人上一篇博客中， 不少园友提出说对css3"画图"不是很理解， 在跟他们私聊了一段时间之后，加上本身在开始自学css3的时候的疑惑，我以为你们之因此不是很理解主要是由于对伪元素不太了解，介于画图和CSS3里一些高大上的特效用的比较普遍的伪类元素就是::before 和 ::after， 写这篇博客主要也是为了起到一个敲门砖的做用，因此本篇博客主要是讲::before 和 ::after。那么就让咱们一块儿来聊聊伪元素吧。

2.CSS历史

伪元素实际上在CSS1(CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被从新修订)中就存在了，只不过在后来的浏览器争霸时代发生了不少的演变。。在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（好比:hover，:active等）。不过索性不管你写一个冒号仍是两个冒号，浏览器都将能识别它们。因为IE8(千疮百孔的IE你不懂，如今以为最应该致敬的是那些作web开发还须要兼容IE6的程序猿们)只支持单冒号的格式，安全起见若是你想要更普遍的浏览器兼容性那么仍是使用单冒号的格式吧！

3.伪元素概念

相信到这不少人都不知道伪元素究竟是干吗的？它的做用究竟是作什么的，下面就让咱们一块儿来揭开伪元素的神秘的面纱，探索伪元素背后那鲜为人知的故事。

伪元素直义理解就是"假元素"或者"假装元素"。其实也能够这么理解， 伪元素实际上就是虚拟的元素，不存在的元素(code形式), 你也无发在文档中找到他们，所以说伪元素是虚拟元素。

4.伪元素做用

尽管做为“虚假”的元素，事实上伪元素表现上就像是“真正”的元素，咱们可以给它们添加任何样式，好比改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。CSS 伪元素主要用于向某些选择器设置特殊效果。

5.伪元素用法

好了，标准的博客流程(就是前奏得揍好久，一大堆各类乱八七糟的介绍，其实我也不喜欢这些东西，可是为了向园子的大神们看近，也增长你们对伪元素的理解。 so，咱们也走了一遍流程。)已经走完了。下面让咱们一块儿来看看伪元素的用法

5.1简单例子

首先经过一个最最简单的例子， 来告诉你们:before和:after究竟是个什么东东。

<style>
    .cnblogsDemo1:before {
            content: '向钱看';
        }

/*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/

.cnblogsDemo1:after { content: '向厚看'; } </style> <div class="cnblogsDemo1"> 这里1 </div>

 

效果：

    运行效果是： 向钱看 这里 向厚看， 并且"向钱看"/"向厚看"其实是不存在的，并且这种虚假的元素在页面(测试的是谷歌浏览器)上.是没法直接复制的, 咱们只是经过伪元素实现了这个"向钱看"/"向厚看"。相信看到这里你们对伪元素内心已经有了一个概念了，其实在伪元素里，咱们不光能够"向钱看"/"向厚看"，咱们能够经过伪元素作不少事情。

5.2水滴例子

 

好比咱们简单实现一个水滴(好比百度地图上标记你当前位置的图标)的效果, 实现水滴效果呢咱们分为三步走。

5.2.1首先实现画一个圆形

　　

<style>
span {
            height: 40px;
            width: 40px;
            display: block;
            position: relative;
        }
.cnblogsDemo2 {
            height: 26px;
            width: 26px;
            border-radius: 40px;
            -webkit-border-radius: 40px;    /* Safari and Chrome */
            -moz-border-radius: 40px;       /* Firefox */
            background: #333;

/*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/

        }
</style>
<span class="cnblogsDemo2">
        
</span>

 效果:

5.2.2实现画一个三角形

<style>
.cnblogsDemo3 {
            height: 0px;
            width: 0px;
            border: 10px transparent solid;
            border-top-color: #333;
            border-width: 15px 10px 0px 10px;
        }
</style>
<span class="cnblogsDemo3">

</span>

/*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/

效果：

5.2.3水滴实现

可能到这里不少园友都感受到讲圆形和三角形有机结合的话其实就是一个水滴的效果，没错，在有:before和:after的帮助下，咱们想实现水滴效果就很是简单了，只须要将两者有效的结合。

<style>
span {
            height: 40px;
            width: 40px;
            display: block;
            position: relative;
        }
.cnblogsDemo4 {
            width: 26px;
        }

            .cnblogsDemo4:before {
                content: '4';
                height: 26px;
                width: 26px;
                display: block;
                position: absolute;
                top: 2px;
                left: 0px;
                z-index: 1;
                line-height: 26px;
                background: #333;
                border-radius: 40px;
                -webkit-border-radius: 40px;
                -moz-border-radius: 40px;
                color: #fff;
                text-align: center;
            }

            .cnblogsDemo4:after {
                content: '';
                height: 0px;
                width: 0px;
                display: block;
                position: absolute;
                bottom: 2px;
                left: 3px;
                border: 10px transparent solid;
                border-top-color: #333;
                border-width: 15px 10px 0px 10px;
            }
</style>
<span class="cnblogsDemo4">
    </span>

效果：

 水滴效果其实原理很简单，只是在:before和:after的基础上加一些定位，而后就能够将圆形和三角形有机结合成水滴，这个效果只是灯红酒绿的CSS3世界里最简单的一个实例，只是但愿经过这个简单的实例让园友们领略到css3的风韵，从而了解或者喜欢CSS3.

6.总结

css的伪元素还有不少不少，这里就不所有列举了，须要咱们一块儿慢慢去探索。CSS在有效的结合各类东东以后，其实能够实现不少高大上的效果，尤为是如今的[5+3]时代，更是所向披靡。

想了解更多css demo有兴趣的园友能够看个人上一篇博客，只但愿这篇博客对你们学习web前端起到一点点推波助澜的效果。

 

做　　者：请叫我头头哥
出　　处：http://www.cnblogs.com/toutou/
关于做者：专一于基础平台的项目开发。若有问题或建议，请多多赐教！
版权声明：本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文连接。
特此声明：全部评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我 声援博主：若是您以为文章对您有帮助，能够点击文章右下角“推荐”一下。您的鼓励是做者坚持原创和持续写做的最大动力！