伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。
1.UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。
2.结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。

一. UI伪类
UI伪类会基于特定HTML元素的状态应用样式。最常使用UI伪类的元素是链接（a元素），利用UI伪类，链接可以在用户鼠标悬停时改变文本颜色，或者去掉文本的下划线。此外，还可以有其他响应方式，比如悬停时显示一个信息面板。

1. 链接伪类
   针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。
   Link。此时，链接就在那儿等着用户点击。
   Visited。用户此前点击过这个链接。
   Hover。鼠标指针正悬停在链接上。
   Active。链接正在被点击（鼠标在元素上按下，还没有释放）
   以下就是这些状态对应的4个伪类选择符（使用了a选择符和一些示例声明）：
   a:link {color:black;}
   a:visited {color:gray;}
   a:hover {text-decoration:none;}
   a:active {color:red;}
   注意，有些伪类可以用于任何元素，而不仅仅是a元素。比如，下面这条规则能让段落背景
   在鼠标悬停时变成灰色：
   p:hover {background-color:gray;}
   2.:focus伪类
   e:focus 在这个以及后续的例子中，e表示任何元素，如p、h1、section，等等。表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。下面的规则
   input:focus {border:1px solid blue;}
   会在光标位于input字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。
2. :target伪类
   e:target
   如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它。
   对于下面这个链接
   <a href="#more_info">More Information</a>
   位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的：
   <h2 id="more_info">This is the information you are looking for.</h2>
   那么，如下CSS规则

more_info:target {background:#eee;}

会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。
4.结构化伪类
结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。
1）:first-child和:last-child
e:first-child
e:last-child
:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。比如，把下面的规则
ol.results li:first-child {color:blue;}
应用给以下标记：
<ol class="results">
<li>My Fast Pony</li>
<li>Steady Trotter</li>
<li>Slow Ol' Nag</li>
</ol>
文本“My Fast Pony”就会变成蓝色。如果选择符改成这样：
ol.results li:last-child {color:red;}
那变成红色的文本就是“Slow Ol' Nag”了。
2）:nth-child
e:nth-child(n)
e表示元素名，n表示一个数值（也可以使用odd或even）。
li:nth-child(3) 会选择一组列表项中的每个第三项。
5.伪元素
顾名思义，伪元素就是你的文档中若有实无的元素。

1. ::first-letter伪元素
   e::first-letter
   p::first-letter {font-size:300%;}
   如果不用伪元素创建这个首字符放大效果，必须手工给该字母加上<span>标签，然后再
   为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。
   2.::first-line伪元素
   e::first-line
   可以选中文本段落（一般情况下是段落）的第一行。
   p::first-line {font-variant:small-caps;}
   ::first-line伪元素把第一行变成了小型大写字母。注意，::first-line伪元素的长度会随浏览器窗口大小的变化而改变。
   3.::before和::after伪元素
   以下两个伪元素
   e::before
   e::after
   可用于在特定元素前面或后面添加特殊内容。
   以下标记
   <p class="age">25</p>
   和如下样式
   p.age::before {content:"Age: ";}
   p.age::after {content:" years.";}
   注意，每个content属性值中都包含了空格，以便输出结果中有适当的空距。
   能得到以下结果：
   Age: 25 years.
   如果标签中的内容是通过数据库查询生成的结果，那么用这种技巧再合适不过了。因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明性文字。这个例子展示了对::before和::after伪元素很基本又很实用的应用。
   6.继承
   CSS中的祖先元素也会向后代传递一样东西：CSS属性的值。
   body是所有元素的老祖宗，所有标签都是它的后代。那么由于CSS继承的约定，如果我们为body像下面一样写一条规则 body {font-family:helvetica, arial, sans-serif;}
   那么，文档中的所有元素，无论它在层次结构中多么靠下，都将继承这些样式，以Helvetica字体（或者在Helvetica字体无效时以其他字体代替）显示各自包含的文本。继承给我们带来的效率是显而易见的，全站的主字体只要在某个上层元素上指定即可，无须在每一个标签上分别指定。而对于个别想使用不同字体的元素，只要个别设定font-family属
   性就好了。
   CSS中有很多属性是可以继承的，其中相当一部分都跟文本有关，比如颜色、字体、字号。然而，也有很多CSS属性不能继承，因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距。
   7.层叠
   层叠，就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。
   层叠是CSS的核心机制，理解了它才能以最经济的方式写出最容易改动的CSS，让文档外观在达到设计要求的同时，也给用户留下一些空间，让他们能根据需要更改文档的显示效果（比如整体调整字号）。
   以下就是浏览器层叠各个来源样式的顺序：
   浏览器默认样式表
   用户样式表
   作者链接样式表（按照它们链接到页面的先后顺序）
   作者嵌入样式
   作者行内样式
   浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值的设定。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。
   8.层叠规则
   层叠规则一：找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时，都会据此查到每一条CSS规则，标识出所有受到影响的HTML元素。
   层叠规则二：按照顺序和权重排序。浏览器依次检查5个来源，并设定匹配的属性。如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环，直到检查完页面中所有标签受影响属性的全部5个来源为止。最终某个属性被设定成什么值，就用什么值来显示。
   层叠规则三：按特指度排序。除了有点拗口之外，特指度（specificity）其实表示一条规则有多明确。如果没有特指度的考量，那为了让恰当的样式起作用，恐怕我们就免不了要频繁变换样式表中规则的顺序了。
   9.增加权重
   声明也可以有权重。可以像下面这样为单独的声明增加权重：
   p {color:green ! important; font-size:12pt;}
   这条规则加重了将文本设置为绿色的权重。于是，就算层叠的下一来源给段落设定了其他颜色，最终的颜色值仍然还是绿色。说到底，就是一种特权，相当于你下了命令：就应用这个样式啦，其他来源一概不用考虑。不过，在使用这个特权之前，一定要知道你的这个!important声明，很可能会让用户的个人设定不起作用，而用户的设定对他可能还非常重要。每次当你有使用这个特权的冲动时，最好先静下心来仔细分析一下自己的CSS，多数情况下都应该可以想出一种更好的替代方案。就我个人而言，我是基本上不用!important声明的。
   10 计算特制度
   下面我们具体讲一讲怎么计算选择符的特指度。首先，有一个简单的记分规则，即对每个选择符都要按下面的“ICE”公式计算三个值：

I - C - E
ICE并非真正的三位数，只不过大多情况下把结果看成一个三位数没有问题，三位数最大的胜出。但是，千万得知道0-1-12与0-2-0相比，仍然是0-2-0的特指度更高。
三个字母间的短横线是分隔符，并非减号。针对这个公式的计分办法如下：

1. 选择符中有一个ID，就在I的位置上加1；
2. 选择符中有一个类，就在C的位置上加1；
3. 选择符中有一个元素（标签）名，就在E的位置上加1；

4. 得到一个三位数。
   好了，下面通过几个例子来理解特指度。
   P 0-0-1特指度=1
   p.largetext 0-1-1特指度=11
   p#largetext 1-0-1特指度=101
   body p#largetext 1-0-2特指度=102
   body p#largetext ul.mylist 1-1-3特指度=113
   body p#largetext ul.mylist li 1-1-4特指度=114
   查理版简单层叠要点
   在这个查理版里，只要记住三条规则就够了。这三条规则适合所有情况。
   规则一：包含ID的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择
   符。
   规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌
   入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明
   的胜过先声明的。
   规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都
   会胜出。

   
   
   image.png