一、伪类
伪类包含两种：状况伪类（UI 伪类）和构造性伪类。
(1)状况伪类是基于元素当前状况举行挑选的。
在与用户的交互过程当中元素的状况是动态变化的，因而该元素会依据其状况显现差别的款式。当元素处于某状况时会显现该款式，而进入另一状况后，该款式也会落空。
罕见的状况伪类重要包含：
:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于具有键盘输入核心的元素。
:target 应用于链接点击后指向元素
前 4 个伪类的特指度雷同，假如不根据这里列出的递次运用它们，浏览器可以不会显现预期结果。为了好记，可以这么想：“LoVe? HA!”大写字母就是每一个伪类的头一个字母。
input:focus {border:1px solid blue;}
会在光标位于 input 字段中时，为该字段增加一个蓝色边框。如许可以让用户明白
地晓得输入的字符会出如今那里。
<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2>
#more_info:target {background:#eee;}
会在用户单击链接转向 ID 为 more_info的元素时，为该元素增加浅灰色背景。
(2)构造性伪类是css3新增挑选器
应用dom树举行元素过滤，经由过程文档构造的相互关联来婚配元素，可以削减class和id属性的定义，使文档构造更简约。
罕见的包含：
:first-child 挑选某个元素的第一个子元素；
:last-child 挑选某个元素的末了一个子元素；
:nth-child() 挑选某个元素的一个或多个特定的子元素；
:nth-last-child() 挑选某个元素的一个或多个特定的子元素，从这个元素的末了一个子元素最先算；
:nth-of-type() 挑选指定的元素；
:nth-last-of-type() 挑选指定的元素，从元素的末了一个最先盘算；
:first-of-type 挑选一个上级元素下的第一个同类子元素；
:last-of-type 挑选一个上级元素的末了一个同类子元素；
:only-child 挑选的元素是它的父元素的唯一一个子元素；
:only-of-type 挑选一个元素是它的上级元素的唯一一个雷同范例的子元素；
:empty 挑选的元素内里没有任何内容。
二、伪元素
伪元素是对元素中的特定内容举行操纵，而不是形貌状况。它的操纵层次比伪类更深一层，因而动态性比伪类低许多。现实上，伪元素就是拔取某些元素前面或背面这类平常挑选器没法完成的事情。掌握的内容和元素是雷同的，但它自身是基于元素的笼统，并不存在于文档构造中！
罕见的伪元素挑选器包含：
:first-letter 挑选元素文本的第一个字（母）。
:first-line 挑选元素文本的第一行。
:before 在元素内容的最前面增加新内容。
:after 在元素内容的末了面增加新内容。
三、注重
单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素，为了兼容某些浏览器，平常都采纳单冒号
兼容性的题目，交给postcss去做。本文并未触及兼容性的写法，包含前缀题目，可以交给autoprefixer去做。（这句话啥意思没懂，今后看看说的啥）
伪类（构造伪类）的结果可以经由过程增加一个现实的类来到达，而伪元素的结果则须要经由过程增加一个现实的元素才到达，这也是为何他们一个称为伪类，一个称为伪元素的缘由。
四、伪元素的运用
（1） 消灭浮动
.clear:after {
content: '';
display: block;
clear: both;
}
(2) 画分割线
<style>
* {
padding: 0;
margin: 0;
}
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style></head><body>
<p class="spliter">分割线</p></body>
以上就是CSS中伪类和伪元素的细致引见（代码示例）的细致内容，更多请关注ki4网别的相干文章！
