DIV+CSS基础DIV+CSS十日教程9:了解CSS的伪类和伪元素

DIV+CSS十日教程9:了解CSS的伪类和伪元素

CSS伪类属性可以用于给选择器添加特殊效果,这样说可能不好理解,我们在网页设计中很常见的伪类属性是关于链接的,例如一个文本链接,鼠标未指向的时候是黑色,鼠标指向的时候变成红色,访问过该链接后变成蓝色,这就可以通过CSS来实现,下面我们来试试:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS伪类</title>
<style type="text/css">
h1{margin:10px;padding:0;font-size:150%;}
a:link {color:#000}     /*-- 未访问 --*/
a:visited {color:blue}  /*-- 已访问 --*/
a:hover {color:red}    /*-- 鼠标悬停在链接上 --*/
a:active {color:green}   /*-- 被选择的链接 --*/
</style>
</head>
<body>
<h1>
<a href="http://www.google.com">Google</a>
</h1>
<p>全球最大的搜索引擎</p>
</body>
</html>

浏览这个网页,我们发现文字链接显示为黑色,当鼠标指向的时候,显示为红色,当我们访问后它就显示为蓝色,而在链接按下的那一刻,或者以右键点击链接时,它显示为绿色,这就是关于链接的伪类属性。一般的,关于链接的这四个属性就按这个顺序书写。

链接未访问.png

我们很多时候定义链接并没有完全用到这四个属性,比较常见的做法是:

a {color:#000}     /*-- 链接 --*/
a:hover {color:blue}  /*-- 鼠标悬停在链接上 --*/

鼠标悬停这个属性我们平时最常用,我们刚演示了鼠标经过链接的时候文字颜色发生变化,事实上我们所能定义的不单是颜色,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS伪类</title>
<style type="text/css">
h1{margin:10px;padding:0;font-size:150%;}
a {color:#000;}
a:hover {color:red;background:blue;border:10px solid #eee}
</style>
</head>
<body>
<h1>
<a href="http://www.google.com">Google</a>
</h1>
<p>全球最大的搜索引擎</p>
</body>
</html>

我们看到,鼠标指向链接的时候,链接的文字显示为红色,背景显示为蓝色,边框显示为浅灰色。

关于hover属性不仅仅用于链接,还可以用于其他元素,例如:

img:hover {border:2px solid green}

这表示当鼠标指向图片的时候,图片显示宽为2像素的绿色边框,鼠标离开的时候,恢复之前的样子。

灵活的使用hover属性,可以让网页和用户之间产生互动性。

接下来来了解另一个伪类选择器:first-child,它的基本含义是添加样式到第一个子元素,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS伪类</title>
<style type="text/css">
div a {margin:10px;padding:10px;}
div a:first-child {color:red;}
</style>
</head>
<body>
<div>
<a href="http://www.google.com">Google</a>
<a href="http://www.yohoo.com">Yohoo</a>
<a href="http://www.cnn.com">CNN</a>
</div>
</body>
</html>

浏览这个网页,我们发现有3个链接元素,只有第一个链接显示为红色。

first-child.png

在CSS中,伪类和伪元素的区别是:CSS伪类用于向某些选择器添加特殊的效果,而CSS伪元素用于将特殊的效果添加到某些选择器。我们刚才了解的几个伪类就是向某些选择器添加特殊的效果,下面我们来了解一下伪元素。

1. 给文本的第一个字添加效果(:first-letter)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS伪元素</title>
<style type="text/css">
p {font-size:16px;}
p:first-letter {font-size:24px;color:red;}
</style>
</head>
<body>
<p>
全世界最大的搜索引擎——Google
</p>
</body>
</html>

浏览这个网页,我们发现文本的第一个字显示为更大的字号和红色。

first-letter.png

2. 向文本的首行添加特殊效果(first-line)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS伪元素</title>
<style type="text/css">
p {font-size:16px;}
p:first-line {font-size:24px;color:red;}
</style>
</head>
<body>
<p>
金庸武侠小说是20世纪中国文学史上无可比肩的畅销书,其在征服了无数读者的同时也掀起学术界对其进行研究的热潮。
</p>
</body>
</html>

浏览这个网页,我们发现段落的第一行文本显示了特殊效果。

first-line.png

3. 在元素之前添加内容(:before)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS伪元素</title>
<style type="text/css">
li:before{content:"男明星-";color:blue}
</style>
</head>
<body>
<ul>
<li>周杰伦</li>
<li>刘德华</li>
<li>张学友</li>
<li>陈奕迅</li>
</ul>
</body>
</html>

浏览这个网页,我们发现每个li的文字前面都添加了“男明星-”这个字符。

before.png

4. 在元素之前添加内容(:after)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS伪元素</title>
<style type="text/css">
li:after {content:" \266B";color:red}
</style>
</head>
<body>
<ul>
<li>周杰伦</li>
<li>刘德华</li>
<li>张学友</li>
<li>陈奕迅</li>
</ul>
</body>
</html>

浏览这个网页,我们发现每个li的后面加上了一个小符号,这个符号属于unicode字符集,大家可以自己搜索一下特殊符号的转义符表示方法。

after.png

这里的content属性是以上两个伪元素的特殊属性,其用法很多,比如:

h1:before {content:url(logo.png);}

通过这个写法可以将图片显示在h1的前面……

很多时候网页中需要使用一个空的div来清除浮动,例如<div class="clear"></div>,而这样的做法使文档无故多了空标签,现在可以用伪元素来实现清除浮动:

#top:after {content:" ";display:table;width:0;clear:both;visibility:hidden;}

用伪元素给元素块的后面加上一个“空白内容”,对这个空白内容设置了清除浮动的属性,就不需要在html中添加空标签就可以清除浮动了。

通过before和after两个伪元素的灵活运用,可以实现很多炫酷的效果,这个在本站以后的文章中会经常遇到……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/10.html