首先是最为常用的链接的样式
根据访客与链接的交互方式,链接有四种状态,这四种状态的外观可以使用四个伪类装饰。这些伪类分别对应下述的四个状态:
HTML代码
<a href="//www.greatytc.com/c/1681745eb504">我的Web笔记</a>
a:link(未访问状态)
选取访客尚未访问的链接。即:鼠标没有悬停其上,也没有正在单击的链接。这个选择符定义的样式是尚未单击的普通链接。
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(鼠标经过)
用于修改鼠标悬停其上的链接外观。这种变化效果不只是为了好玩,还可以让导航栏里的按钮或者栏目链接有视觉反馈。
CSS代码
a:hover {
color: pink;
}
除了链接之外,其他元素也可以使用:hover伪类。
例如,可以使用这个伪类突出显示<p>或<div>元素中访客悬停其上的文字。此时,选择符不是a:hover(这是链接专用的),而要定义名称为p:hover的样式,指明鼠标悬停在段落上时显示什么样的特殊效果。
如果只想装饰类为highlight的标签,可以定义名为.highlight:hover的样式。
a:active(鼠标点击时)
用于设定访客点击链接时链接的外观。也就是访客按下鼠标按钮到松开之前那几纳秒。
CSS代码
a:active {
color: red;
}
a:active一般我是不写的,因为这个通常提升不到什么用户体验。因为在按下去那0点几秒,可以说大部分用户是没感觉的。而且在移动端,我也想不出能带来什么好的效果。
最后要说明链接伪类的书写顺序:
一定要按照 a:link > a:visited > a:hover > a:active 这个顺序书写。
为段落的各部分编写样式
CSS提供了两个伪元素, :first-letter 和 :first-line,以便使用几个世纪以来纸质印刷品使用的方式设计网页。
:first-letter
可以实现首字下沉效果,即像书里一章的开头那样,段落的第一个字母脱离段落里的其他内容,单独以大号或粗体显示。
CSS代码
p:first-letter {
font-size: 2em;
}
:first-line
让段落的第一行以不同的样式显示,能吸引读者的眼球。
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 选择符通常用于选取单行文本框、密码文本框和多行文本框<textarea>)。
CSS代码
input:focus {
background: pink;
}
:focus 选择符只在元素获得焦点时才起作用。如果访客按Tab键进入其他文本框,或单击网页的其他位置,原来焦点所在的文本框就失去了焦点(因此定义的CSS属性也无效了)。
:before
:before 伪元素的作用其他选择符无法实现:在指定元素前添加内容。
比如说,你可能想在某些段落的开头加上“HOT TIP!”,突出显示这些段落。除了在网页的HTML代码中输入所需的文字之外,还可以使用 :before 选择符。后者不仅能减少代码量,而且还便于日后修改。
CSS代码
p:before {
content: "HOT TIP! ";
color: red;
}
通过这种方式添加的内容个,技术术语叫:“生成的内容”,因为这种内容是Web浏览器生成的,网页的HTML源码中没有。你可能没注意到,浏览器总会生成一些内容,例如无序列表前的项目符号和有序列表前的序号。如果愿意,甚至可以使用 :before 选择符定义浏览器如何显示列表的项目符号和序号。
IE 8 及以上版本和其他所有主流浏览器都支持 :before 选择符。
不支持 :before 选择符的浏览器,不会显示指定的内容。
:after
:after 伪元素的作用与 :before 选择符很相似,都是用于添加生成的内容。
不过,:after 选择符添加的位置在元素之后,而不是之前。
CSS代码
p:after {
content: "<本文完>";
color: #666;
}
注意!
:before 和 :after 都是伪元素。前面说过,最新版CSS在伪元素前面多加了一个冒号,因此 :before 和 :after 变成了 ::before 和 ::after 。
幸好,浏览器还支持旧的写法,所以可以继续使用 :before 和 :after 。
IE 8 不兼容新写法。
::selection
::selection 是CSS3新加的选择符,用于指代访客在网页中选中的内容。
例如,访客拖动按下的鼠标,选择一些文字之后,浏览器会高亮显示选中的内容。正常情况下,浏览器会以蓝色的背景显示选中的文字,而 IE 会把选中的文字变成白色。
使用 ::selection 可以控制背景色和文字颜色。
CSS代码
p::selection {
color: #fff;
background-color: #993366;
}
在 ::selection 选择符中,定义的样式只能设置 color 和 background-color 两个属性。不能随心所欲去设置字号、字体、外边距或其他外观,以免出现排版错乱和访客抓狂的情况。
需要注意的是, ::selection 这个伪元素没有单冒号版,因此必须使用两个冒号。也就是说, ::selection 有效,而 :selection 无效!
这意味着IE 8及更早的版本不支持这个选择符。
HTML与CSS 目录:HTML与CSS
上一篇:【CSS选择符】后代选择符
下一篇:【CSS选择符】属性选择符