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

2022-07-15 80酷酷网 80kuku.com

　　css|网页

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>
<a href="default.asp" target="_blank">This is a link</a>
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
</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>
Mouse over the links to see them change layout.
<a class="one" href="default.asp" target="_blank">This link changes color</a>
<a class="two" href="default.asp" target="_blank">This link changes font-size</a>
<a class="three" href="default.asp" target="_blank">This link changes background-color</a>
<a class="four" href="default.asp" target="_blank">This link changes font-family</a>
<a class="five" href="default.asp" target="_blank">This link changes text-decoration</a>
</body>
</html>

:first-child（首个子对象）
本例演示:first-child伪类的用法。

<html>
<head>
<style type="text/css">
a:first-child
{
text-decoration:none
}
</style>
</head>
<body>
The :first-child pseudo-class is used to define a special style for an element that is the first child of another element.
Visit <a href="> and learn CSS!
Visit <a href="> and learn HTML!
</body>
</html>

:lang（语言）

本例演示:lang伪类的用法。

<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
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":
Some text <q lang="no">A quote in a paragraph</q> Some text.
</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