CSS-伪类

1、伪类，与类类似，但实际上并没有类回复加到标记中的标签上。分两种：

a、UI伪类 会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式

b、结构化伪类 会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式

2、UI伪类

基于特定HTML元素的状态应用样式。最常使用的UI伪类的元素是链接（a元素），利用UI伪类，链接可以在用户鼠标悬停时改编文本颜色，或者去掉文本的下划线

2.1、链接伪类（LoVe HA 便于记忆）

a、Link 此时，链接就在那等着用户点击

b、Visited 用户此前点击过这个链接

c、Hover 鼠标指针正悬停在链接上

d、Active 链接正在被点击（鼠标在元素上按下，还么有释放）

a:link {color:black;}

a:visited {color:gray;}

a:hover {text-decoration:none;}

a:active {color:red;}

2.2、focus伪类

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符

2.3、target伪类

用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它

3、结构化伪类

根据标记的结构应用样式，比如根据某元素的父元素或者前面的同胞元素是什么

3.1、:first-child和:last-child

e:first-child 代表一组同胞元素中的第一个元素

e:last-child 代表最后一个元素

e表示任何元素

<ol class="results">

　　<li>my fast pony</li>

　　<li>steady trotter</li>

　　<li>slow ol' nag</li>

</ol>

ol.results li:first-child {color:blue;}应用上面序列中，my first pony会变成蓝色

4、伪元素

::first-letter 选中首个字符

::first-line 选中文本段落的第一行

::before 特定元素前面添加特殊的内容

::after 特定元素后面添加特殊的内容

<p class="age">25</p>

p.age::before {content:"Age: ";}

p.age::after {content:"years. ";}

结果显示如下：

Age 25 years.

Notice~ 搜索引擎不会取得伪元素的信息（因为它在标记中并不存在），因此，不要通过伪元素添加你想让搜索引擎索引的重要内容