|
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元素内的第一个段落进行缩进： 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）。
伪类
作用
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
 |
频道声明：本频道的文章除部分特别声明禁止转载的专稿外，可以自由转载.但请务必注明出出处和原始作者 文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意。
| 原始作者:佚名 |
录入时间:2007-6-20 17:12:09 |
| 信息来源:不详 |
投稿信箱:itqoo@126.com |
|
|
 |
|
用户登录 
新用户注册 
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！） 