元素中访客悬停其上的文字。此时，选择符不是a:hover(这是链接专用的)，而要定义名称为p:hover的样式，指明鼠标悬停在段落上时显示什么样的特殊效果。

如果只想装饰类为highlight的标签，可以定义名为.highlight:hover的样式。

a:active(鼠标点击时)

用于设定访客点击链接时链接的外观。也就是访客按下鼠标按钮到松开之前那几纳秒。

0.gif

CSS代码

a:active {

color: red;

}

a:active一般我是不写的，因为这个通常提升不到什么用户体验。因为在按下去那0点几秒，可以说大部分用户是没感觉的。而且在移动端，我也想不出能带来什么好的效果。

最后要说明链接伪类的书写顺序：

一定要按照 a:link > a:visited > a:hover > a:active 这个顺序书写。

为段落的各部分编写样式

CSS提供了两个伪元素， :first-letter 和 :first-line，以便使用几个世纪以来纸质印刷品使用的方式设计网页。

:first-letter

可以实现首字下沉效果，即像书里一章的开头那样，段落的第一个字母脱离段落里的其他内容，单独以大号或粗体显示。

image.png

CSS代码

p:first-letter {

font-size: 2em;

}

:first-line

让段落的第一行以不同的样式显示，能吸引读者的眼球。

image.png

CSS代码

p:first-line {

color: #0e98c6;

}

注意！

最新版CSS修改了伪元素的语法。在CSS 2.1中，伪元素以一个冒号开头，例如，:first-letter。

为了把伪元素与:hover等伪类区分开，CSS3多加了一个冒号。因此，:first-letter和:first-line现在变成了 ::first-letter 和 ::first-line。幸好，为了兼容以前的网站，浏览器会一直支持单冒号版本的伪元素。这是好事，因为IE 8不能识别双冒号语法。所以，现在可以坚持继续使用但冒号版本，因为所有其他浏览器也都仍然支持。

其他伪类和伪元素

:focus(选中焦点)

:focus 伪类的作用与 :hover 伪类十分相似，不过 :hover 伪类在访客把鼠标悬停到链接上时起作用，而 :focus 伪类在访客执行某个动作(通常是单击或按Tab键)，表明他的注意力在网页中某个元素上时起作用。

:focus 选择符的最大作用是给访客反馈。例如修改文本框的背景色，突出显示他准备填写内容的位置(:focus 选择符通常用于选取单行文本框、密码文本框和多行文本框)。

0.gif

CSS代码

input:focus {

background: pink;

}

:focus 选择符只在元素获得焦点时才起作用。如果访客按Tab键进入其他文本框，或单击网页的其他位置，原来焦点所在的文本框就失去了焦点(因此定义的CSS属性也无效了)。

:before

:before 伪元素的作用其他选择符无法实现：在指定元素前添加内容。

比如说，你可能想在某些段落的开头加上“HOT TIP!”，突出显示这些段落。除了在网页的HTML代码中输入所需的文字之外，还可以使用 :before 选择符。后者不仅能减少代码量，而且还便于日后修改。

image.png

CSS代码

p:before {

content: "HOT TIP! ";

color: red;

}

通过这种方式添加的内容个，技术术语叫：“生成的内容”，因为这种内容是Web浏览器生成的，网页的HTML源码中没有。你可能没注意到，浏览器总会生成一些内容，例如无序列表前的项目符号和有序列表前的序号。如果愿意，甚至可以使用 :before 选择符定义浏览器如何显示列表的项目符号和序号。

IE 8 及以上版本和其他所有主流浏览器都支持 :before 选择符。

不支持 :before 选择符的浏览器，不会显示指定的内容。

:after

:after 伪元素的作用与 :before 选择符很相似，都是用于添加生成的内容。

不过，:after 选择符添加的位置在元素之后，而不是之前。

image.png

CSS代码

p:after {

content: "";

color: #666;

}

注意！

:before 和 :after 都是伪元素。前面说过，最新版CSS在伪元素前面多加了一个冒号，因此 :before 和 :after 变成了 ::before 和 ::after 。

幸好，浏览器还支持旧的写法，所以可以继续使用 :before 和 :after 。

IE 8 不兼容新写法。

::selection

::selection 是CSS3新加的选择符，用于指代访客在网页中选中的内容。

例如，访客拖动按下的鼠标，选择一些文字之后，浏览器会高亮显示选中的内容。正常情况下，浏览器会以蓝色的背景显示选中的文字，而 IE 会把选中的文字变成白色。

使用 ::selection 可以控制背景色和文字颜色。

0.gif

CSS代码

p::selection {

color: #fff;

background-color: #993366;

}

在 ::selection 选择符中，定义的样式只能设置 color 和 background-color 两个属性。不能随心所欲去设置字号、字体、外边距或其他外观，以免出现排版错乱和访客抓狂的情况。

需要注意的是， ::selection 这个伪元素没有单冒号版，因此必须使用两个冒号。也就是说， ::selection 有效，而 :selection 无效！

这意味着IE 8及更早的版本不支持这个选择符。

HTML与CSS 目录：HTML与CSS