首页 > > 网页制作 > css >

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

2008-02-23 08:43:45来源：互联网阅读 ()

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