二、CSS伪类和伪元素

1. UI伪类

UI(User Interface 用户界面)伪类会在HTML元素处在某个状态时为该元素应用CSS样式，例如鼠标指针放在链接上。

1.1 链接伪类

link：链接最初时的状态；

visited：链接被点击过后的状态；

hover：鼠标指针悬停在链接上时的状态；

active：链接正在被点击，鼠标还未释放；

a:link {color:yellow;}
a:visited {color:blue;}
a:hover {text-decoration:none;}
a:active {color:red;}
//当链接被载入时显示的颜色是yellow，鼠标放在链接上时链接的下划线消失，
//点击链接时显示的颜色是red，释放连接后显示的颜色是blue。
/*
因特指度相同，在实际使用的过程中，为防止浏览器可能达不到预期效果，
最好按照上面的顺序。可根据自己的需要选择其中的一部分，不必定义全部4个。
*/

注意： 有些伪类可用于任何元素，不仅仅是a元素，例如p:hover {background-color:blue;}

1.2 :focus伪类

e:focus，e表示任何元素，在该元素获得焦点时起作用。

input:focus {border:1px solid blue;}
//当光标位于input字段中时，为该字段添加一个蓝色边框。

1.3 :target伪类

e:target，当点击一个指向页面中其他元素的链接时，那个元素就是目标(target)，可是使用:target伪类选中它。

<a href="#more">1</a>
<p id="more">It's the information you are looking for.</p>
//CSS规则
#more:target {background:#eee;}
//当用户点击链接转向id为more的元素时，为该元素添加浅灰色背景。

2. 结构化伪类

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

2.1 :first-child和:last-child

e:first-child，代表一组兄弟元素中的第一个元素。

e:last-child，则代表最后一个。

ol.test li:first-child {color:green;}

<ol class="test">
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
//会将“first”变为绿色，将first改成last就可以将“thirs”变为绿色。

2.2 :nth-child

e:nth-child(n)，其中，n是一个数值，也可以使用odd或even。

//会选中列表项中的第一个，即first，并将其颜色变为蓝色。
li:nth-child(1) {color:blue;}

//将列表项中序列号是奇数的文本颜色设置为蓝色，即“first”和“third”。
//偶数的文本颜色设置为灰色，即“second”。
//:nth-child最常用于提高表格的可读性。
li:nth-child(odd) {color:blue;}
li:nth-child(even) {color:gray;}

3. 伪元素

伪元素是文档中若有实无的元素，注意: 一个冒号(:)表示伪类，两个冒号(::)表示伪元素，但是实际中两个一个都是可以用的。这里介绍几个常用的伪元素。

3.1 ::first-letter

e::first-letter

p::first-letter {font-size:200%;}
//段落中的第一个字符放大为原来的两倍。

3.2 ::first-line

e::first-line

p:first-line {color:blue;}
//将段落的第一段的颜色设置为蓝色，其长度会随着浏览器窗口大小的变化而变化

3.3 ::before和::after

e::before

e::after

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

//显示的内容是"Age: 25 years."
p.age::before {content: "Age: ";}
p.age::after {content: " years.";}

注意： 搜索引擎不会取得伪元素的信息，因此不要通过伪元素添加你想要搜索引擎索引的重要内容。