通过实例学习网页技术CSS的伪类 (Pseudo-classes)

暮年 · 发表于 2007-8-15 11:16

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=\"http://www.webjx.com\">webjx</a> and learn CSS!
Visit <a href=\"http://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元素内的第一个段落进行缩进：

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.w3school.com.cn\">W3School</a>学习CSS！
访问<a href=\"http://www.w3school.com.cn\">W3School</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）。
伪类作用IEFNW3C
:active将样式添加到被激活的元素4181
:focus将样式添加到被选中的元素---2
:hover当鼠标悬浮在元素上方时，向元素添加样式4171
:link将特殊的样式添加到未被访问过的链接3141
:visited将特殊的样式添加到被访问过的链接3141
:first-child将特殊的样式添加到元素的第一个子元素 172
:lang允许创作者来定义指定的元素中使用的语言 182

帐号		自动登录	找回密码
密码			成为会员