细说CSS伪类和伪元素

原文

　　简书原文：https://www.jianshu.com/p/eae56b7fe7fe

大纲

　　1、伪元素
　　2、伪类元素
　　3、伪元素和伪类元素的区别
　　4、伪类和伪元素的使用

1、伪元素

　　伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
　　伪元素的由两个冒号::开头，然后是伪元素的名称。
　　使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。
　　一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。注：不排除未来会加入同时使用多个伪元素的机制。
　　同样，第一段话是伪元素的清晰定义，也是伪元素与伪类最大的区别。简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
　　以::first-line为例，它获取了指定元素的第一行内容并且将第一行的内容加入到虚拟容器中。如果通过JavaScript来实现这个逻辑，那么要考虑的因素就太多了，比如制定元素的宽度、字体大小，甚至浮动元素的图文混排等等。当然，这些问题确实是可以用JavaScript来解决的，但是相对于::first-line简简单单的几个字，用JavaScript恐怕不止这些吧！

2、伪类元素

　　伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
　　伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
　　任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。
　　其实第一段话就囊括CSS3伪类的全部定义了，这段话中指出CSS3伪类的功能有两种：
　　　　1、获取不存在与DOM树中的信息。比如<a>标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
　　　　2、获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素。

3、伪元素和伪类元素的区别

　　1、伪类基于的是当前元素处于的状态，是动态变化的。
　　2、伪元素是对元素中的特定内容进行操作。设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。
　　3、伪元素的权重比伪类高，比如一个容器的为元素和伪类都定义了同一属性，但值不一样，那么将采用伪元素的。

4、伪类和伪元素的使用

/*
    以下代码通过伪类"lang获取不同lang属性的节点，并为之设置伪元素::after，伪元素的
内容是此节点的语言类型。
*/
q:lang(de)::after{
    content: " (German) ";
}
q:lang(en)::after{
    content: " (English) ";
}
q:lang(fr)::after{
    content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

参考网址

https://www.cnblogs.com/ihardcoder/p/5294927.html
你所不知的CSS::before和::after伪元素用法