CSS 伪类 (Pseudo-classes)

CSS 伪类用于向某些选择器添加特殊的效果。

CSS 伪类 (Pseudo-classes)实例：

超链接
本例演示如何向文档中的超链接添加不同的颜色。
超链接 2
本例演示如何向超链接添加其他样式。
:first-child（首个子对象）
本例演示 :first-child 伪类的用法。
:lang（语言）
本例演示 :lang 伪类的用法。

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 元素内的第一个段落进行缩进：

div > p:first-child
   {
   text-indent:25px
   }

<div>
<p>div中的第一段。这个段落将被缩进。</p>
<p>div中的第二段。这个段落不会被缩进。</p>
</div>

下面的 HTML 中的段落将不会被匹配：

<div>
<h1>Header</h1>
<p>div中的第一段，但不是div中的第一个子元素。这个段落不会被缩进。</p>
</div>

例子 2：

在这个例子中，选择器将对 p 元素中的第一个子元素为 em 的元素进行匹配 - 并且将 p 元素中的第一个 em 元素设置为粗体：

p:first-child em
   {
   font-weight:bold
   }

例如，下面的 HTML 中的 em 是段落的第一个子元素：

<p>I am a <em>strong</em> man.</p>

例子 3：

在这个例子中，选择器将对任何元素的第一个子元素为 a 的元素进行匹配 - 将 text-decoration 属性设置为 none：

a:first-child
   {
   text-decoration:none
   }

例如，下面的 HTML 中的第一个 a 元素是段落中的第一个子元素，所以没有下划线。

但是第二个 a 不是段落的第一个子元素，所以有下划线。

<p>访问<a href="http://www.zzvg.cn">W3C</a>学习CSS！
访问<a href="http://www.zzvg.cn">W3C</a>学习HTML！</p>

CSS2 - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

<html>
<head>

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

伪类

浏览器支持：IE Internet Explorer, F: Firefox, N: Netscape。

W3C：“W3C” 列的数字显示出伪类属性由哪个 CSS 标准定义（CSS1 还是 CSS2）。

伪类 作用 IE F N W3C
:active 将样式添加到被激活的元素 4 1 8 1
:focus 将样式添加到被选中的元素 - - - 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式 4 1 7 1
:link 将特殊的样式添加到未被访问过的链接 3 1 4 1
:visited 将特殊的样式添加到被访问过的链接 3 1 4 1
:first-child 将特殊的样式添加到元素的第一个子元素   1 7 2
:lang 允许创作者来定义指定的元素中使用的语言   1 8 2