- 1. CSS选择器
- 2. CSS伪类
- 3. CSS伪元素
- 4. 两者之间区别
- 5. :before和:after使用场景
- 6. 参考列表
在CSS中，模式匹配（pattern match）规则决定文档树上的元素使用究竟哪个样式规则。这个模式就叫做选择器（selector）。
CSS中的元素选择器除了可以id（）、class（）、属性（）选取元素以外，还有很重要的一类，就是根据元素的状态来选取元素，包括伪类（pseudo-class）和伪元素(pseudo-element)。
这些传统的选择器，包括id选择器、class选择器、属性选择器、派生选择器等等，他们是直接从HTML文档的DOM树中获取元素的。而伪类和伪元素选择器是预定义的，且是独立文档元素的。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是基于处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。当然，伪类和伪元素的表示形式也使用（或者）与其它选择器相区分。
什么叫伪类呢？
伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是和是可以从DOM树中推断出来的。）
CSS的现有标准中，伪类包括：
- 点我看手册，应用第一个子元素
- 点我看手册，应用未访问过的链接
- 点我看手册，应用已访问过的链接
- 点我看手册，应用鼠标指针悬浮的元素
- 点我看手册，应用活动的链接
- 点我看手册，应用聚焦的输入元素
- 点我看手册，伪类将应用于元素带有指定lang的情况，不常用
什么是伪元素呢？
伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如和能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
CSS的现有标准中，伪元素包括：
- 点我看手册，伪元素的样式将应用于元素文本的第一个字（母）
- 点我看手册，伪元素的样式将应用于元素文本的第一行
- 点我看手册，在元素内容的最前面添加新内容
- 点我看手册，在元素内容的最后面添加新内容
首先说一下伪类和伪元素的相同之处，
伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。
他们的不同之处，
伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。
一句话总结不同之处就是，伪元素产生新对象，在DOM树中看不到，但是可以操作；伪类不产生新的对象，仅是DOM中一个元素的不同状态；
现在在一些主流的css框架中，比如Bootstrap，Foundation等中，对及的使用较多，而且这两个伪元素在一些特定场景下的确有许多妙用。
demo1是一个专门介绍使用及的博文，可以学习下。
下面，说一下我之前使用及的一个场景。
现在我们需要使用纯CSS做一个下图中的镂空箭头符号，
对应的html代码如下，
样式如下，
其实原理很简单，
设置属性的和的属性为，颜色为透明的。然后将和中的任意一层的设置为可辨识的，然后使用值较高的层遮盖值较低的层，通过微调和的值达到目的。
这里我们当然可以通过一些美化的手段，使得我们的箭头看起来更加好看一点，比如像下面这样，
- W3Cschool
- css伪类伪元素
- CSS 伪类与伪元素
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/41439.html