深入学习CSS伪类语法-css语法

本文和大家重点讨论一下CSS伪类的用法，CSS伪类用于向某些选择器添加特殊的效果，另外还有锚伪类的介绍，在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

CSS伪类

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

CSS定位属性

CSS伪类的语法：

selector:pseudo-class{property:value;}CSS类也可与伪类搭配使用：

selector.class:pseudo-class{property:value;}

锚伪类

在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link{color:#FF0000}/*unvisitedlink*/  
a:visited{color:#00FF00}/*visitedlink*/  
a:hover{color:#FF00FF}/*mouseoverlink*/  
a:active{color:#0000FF}/*selectedlink*/

提示：在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。

提示：在CSS定义中，a:active必须被置于a:hover之后，才是有效的。

提示：伪类名称对大小写不敏感。

CSS伪类和CSS类

CSS伪类可以与CSS类配合使用：

a.red:visited{color:#FF0000}  
<aclassaclass="red"href="css_syntax.asp">CSSSyntax</a>

假如上面的例子中的链接被访问过，那么它将显示为红色。

CSS2-:first-child伪类

CSS伪类中: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-childem{  
font-weight:bold;  
}例如，下面的HTML中的em是段落的第一个子元素：  
 
<p>Iama<em>strong</em>man.</p>

例子3：

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

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

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

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

<p>访问<ahrefahref="http://www.w3school.com.cn">W3School</a>学习CSS！  
访问<ahrefahref="http://www.w3school.com.cn">W3School</a>学习HTML！</p>

CSS2-:lang伪类

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

<html> 
<head> 
<styletypestyletype="text/css"> 
 q:lang(no){quotes:"~""~";}  
</style> 
</head> 
<body> 
 <p>文字<qlangqlang="no">段落中的引用的文字</q>文字</p> 
</body> 
</html>

文章出处：标准之路(http://www.aa25.cn/css2/pseudo_class672.shtml)

【编辑推荐】