本文共 3137 字，大约阅读时间需要 10 分钟。
0016.jpg
首先是最为常用的链接的样式
根据访客与链接的交互方式，链接有四种状态，这四种状态的外观可以使用四个伪类装饰。这些伪类分别对应下述的四个状态：
HTML代码
a:link(未访问状态)
选取访客尚未访问的链接。即：鼠标没有悬停其上，也没有正在单击的链接。这个选择符定义的样式是尚未单击的普通链接。
image.png
CSS代码
a:link {
color: teal;
}
在CSS中，通常情况下，我习惯a:link直接写成a。效果是一样的。
a {
color: teal;
}
注意！
:visited 的限制可用属性
为了保护隐私，浏览器对:visited伪类中能使用哪些CSS属性做了严格限制。不过，几年前有些不法分子已经找到绕过这一限制的方法，他们使用JavaScript读取针对已访问链接的样式，判断用户访问过哪些网站。例如，在已访问链接的背景中加载一个图像，判断访客是否访问过Paypal.com、eBay.com、BankofAmerica.com或其他需要注意安全的网站。因为有这个潜在的风险，只能为已访问的链接设定color、background-color和border-color属性。而且，仅当为链接的普通状态设定了颜色、背景色或边框颜色时才能这么做。也就是说，在:visited伪类中能设置的属性有限。
a:hover(鼠标经过)
用于修改鼠标悬停其上的链接外观。这种变化效果不只是为了好玩，还可以让导航栏里的按钮或者栏目链接有视觉反馈。
0.gif
CSS代码
a:hover {
color: pink;
}
除了链接之外，其他元素也可以使用: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
转载地址：http://yysxl.baihongyu.com/