伪类是一种虚构的状态或者是一个具有特殊属性的元素可以使用css进行样式修饰。常见的几种伪类有：
:link ,:visited,:hover,:active,:first-child,:nth-child,:nth-of-type
伪类前面总是加一个冒号（：）。
:link伪元素代表链接的正常状态，用于选择未访问的链接。:visited伪类用于已经被访问过的链接。:hover伪类用于当用户的鼠标悬停在链接之上时对元素的样式修饰。:active表示鼠标点击时激活。在这里需要声明一点，:link伪元素需要在所有此类别的伪元素之前声明。其顺序为:link,:visited,:hover,:active。
p:nth-child（n）满足两条：
1、是p元素
2、是父元素的第n个孩子
p:nth-of-type（n）则表示：
父元素的第n个段落（p）
伪元素，更像是虚拟的元素可以和HTML元素一样对待。区别在于它们并不存在于文档树或者DOM之中。这意味着我们并没有真正的指定伪元素，但是可以使用CSS进行创建。
常见的几种伪元素
:after,:before,:first-letter
在伪元素中，css3引入双冒号（：：），但是为了更好地兼容浏览器，也可以使用单冒号（：）。但是有一些为元素必须使用双冒号，::backdrop.
伪元素通过CSS生成内容是通过content属性结合:before或者:after伪元素来实现。
::BEFORE/:BEFORE
:before伪元素和它的兄弟:after，用来给另外一个HTML元素添加内容(文本或者图形)。同样的，添加的内容并不在DOM中真实存在但是可操纵。另外，内容的属性需要在CSS中声明。
需要记住，使用这个伪元素添加的文本不可以被选择。
HTML:
<h1>Ricardo</h1>
CSS:
h1:before {
content: "Hello "; /* Note the space after the word Hello. */
}
渲染出来类似这样：
Hello Ricardo!
注意:“Hello ”中的空格也同时被添加进去了。
::AFTER/:AFTER
:after伪元素用来向另一个HTML元素中添加内容(同样的也是文本或者图形)。被添加的内容不存在于DOM中，但是可操纵。为了更好地工作，内容属性需要在CSS中声明。
注意，使用这个伪元素添加的内容不可以被选择。
HTML:
<h1>Ricardo</h1>
CSS:
h1:after {
content: ", Web Designer!";
}
渲染结果如下:
Ricardo, Web Designer!
::BACKDROP (EXPERIMENTAL)
::backdrop伪元素是一个盒子，在全屏元素之后生成，但是在其它所有内容之上。它经常和:fullscreen伪类结合使用改变最大化屏幕的背景颜色 - 如果你不想使用默认的黑色。
注意: ::backdrop伪元素需要使用双冒号，使用单冒号不起作用。
让我们再次继续:fullscreen伪类的示例。
HTML:
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full scre
::FIRST-LETTER/:FIRST-LETTER
:first-letter 伪元素用来选择文本的第一个字母。
如果第一行文本包含一个元素，如图片，播放器或者表格，这时第一个字母不会被影响仍旧可以被选择。
这在段落中是一个很好的应用，如：在不需要使用图片或者外部设置时，可以提高段落的吸引力。
提示:使用:before伪元素生成的内容文本，即使不存在于DOM中，其文本的第一个字母可以被指定。
CSS:
h1:first-letter {
font-size: 5em;
}
::FIRST-LINE/:FIRST-LINE
:first-line伪元素指定一个元素的第一行。它旨在块级元素中起作用，在行内元素不起作用。
当在段落中使用时，如:只是给段落的第一行文本改变样式，即使文本被包裹。
CSS:
p:first-line {
background: orange;
}
选择器优先级
首先来看一下css选择符(css选择器)有哪些?
1.标签选择器(如：body,div,p,ul,li)
2.类选择器(如：class="head",class="head_logo")
3.ID选择器(如：id="name",id="name_txt")
4.全局选择器(如：*号)
5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器(如：div p,注意两选择器用空格键分开)
9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
11.子选择器 (如：div>p ,带大于号>)
12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)
优先级
不同级别
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
1、id选择器
2、类选择器|伪类选择器（nth-child等）|属性选择器（[title]）
3、 标签选择器
4、 通配符选择器
5、浏览器自定义或继承
//css
:first-child{
color:green;
}.aa{
color: red;
}[title]{
color:blue;
}
//dom
<div class="aa" title='s'>f</div>
以上css会相互覆盖
总结排序：!important > 行内样式>ID选择器 > 类选择器=伪类=属性 > 标签 > 通配符 > 继承 > 浏览器默认属性
参考链接https://www.w3cplus.com/css/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements.html
