CSS伪类用于向某些选择器添加特殊的效果。
CSS 伪类 (Pseudo-classes)实例：
- 超链接
- 本例演示如何向文档中的超链接添加不同的颜色。
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective!!</p>
</body>
</html>
- 超链接 2
本例演示如何向超链接添加其他样式。
<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>
- :first-child（首个子对象）
本例演示:first-child伪类的用法。
<html>
<head>
<style type="text/css">
a:first-child
{
text-decoration:none
}
</style>
</head>
<body>
<p>The :first-child pseudo-class is used to define a special style for an element that is the first child of another element.</p>
<p>Visit <a href="webjxhttp://www.webjx.com">Webjx</a> and learn CSS!
Visit <a href="webjxhttp://www.webjx.com">Webjx</a> and learn HTML!</p>
</body>
</html>
:lang（语言）
- 本例演示:lang伪类的用法。
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no":</p>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
CSS 定位属性 (Positioning)
伪类的语法：
selector:pseudo-class {property: value}
CSS类也可与伪类搭配使用。
selector.class:pseudo-class {property: value}
锚伪类
在支持CSS的浏览器中，链接的不同状态都可以不同的方式被显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link{color: #FF0000} /* unvisited link */a:visited{color: #00FF00} /* visited link */a:hover{color: #FF00FF} /* mouse over link */a:active{color: #0000FF} /* selected link */
提示：在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。
提示：在CSS定义中，a:active必须被置于a:hover之后，才是有效的。
提示：伪类名称对大小写不敏感。
伪类和CSS类
伪类可以与CSS类配合使用：
a.red:visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过，那么它将显示为红色。
CSS2 - :first-child伪类
:first-child伪类对另一个元素的第一个子元素进行匹配。
例子 1：
在这个例子中，选择器对div元素中的第一个子元素为p的元素进行匹配 - 对div元素内的第一个段落进行缩进：
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
