css伪类和伪元素

标签：cti   container   快捷   nbsp   第一个   官方   url   美丽   -o   

作为前端人员，每天要与满屏的标签、元素打交道，通过元素与样式类的结合，呈现出一个个美丽优雅的页面，其中也包括css伪类和伪元素的应用，随着前端的发展深入，开发人员运用越来越多的整合技术，使得我们的工作更快捷高效高逼格，下面就来整理一下css中伪类和伪元素的应用；

css伪类：

什么是css伪类(pseudo-class),伪类就是定义个元素的特殊状态的存在，这个特殊状态乍一听以为是什么高科技的玩意，但其实很好理解，比如一个input选框,默认是enable&unchecked，如果是被禁用了被勾选了，就变成特殊状态了，好吧，给个最容易理解也是官方的案例看看：

 如例所示，可以给元素定义相应的伪元素，并且只有在处于定义状态的时候才会生效，调试伪元素的样式的时候，可以借助控制台调控元素的状态：

并且伪类可以和类搭配使用：

还有个比较特别的伪元素lang，貌似这个平时用的比较少，就是通过定义不同的lang类型来定义样式：

就是下面的效果：

当然css伪元素不止这些，写法也多种多样，不过一般常用的也只有前几个，下面是整理到的css伪类；

css 伪类集合：

其实还是蛮多的哈，不过确实一般开发中常用的只有几种，反正我是没用完，能达到预想中的开发效果就行，不必强制追求的，有时候还可以配合jquery进行css操作，写法也很简便；

接下来看一下伪元素(pseudo-element)，了解过伪类的定义后，就更好理解伪元素了，css伪元素就是定义元素"一部分"的特殊样式，比如定义元素的第一个字符，第一行，在元素的before、after、center中定义内容；语法如下：

比如定义一个p的第一行：

向一个元素前或者元素后插入部分内容：

这种方式常配合字体图标出现在网页中，以一个元素作为载体，将字体图标加入到元素区域显示,如图所示：

线上实例页面

伪元素不多却应用广泛，意思也好懂，示例如下：

原文地址：http://www.xuechenlei.com/2016/12/css-pseudo-class-and-pseudo-element/

css伪类和伪元素

标签：cti   container   快捷   nbsp   第一个   官方   url   美丽   -o   

原文地址：http://www.cnblogs.com/xuechenlei/p/6323665.html