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} 

<a class="red"  href="css_syntax.html">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>

               <style type="text/css">  q:lang(no){quotes:"~""~";}  </style>

       </head>

<body>  

       <p>文字<qlangqlang="no">段落中的引用的文字</q>文字</p>

</body>

</html>

posted @ 2013-11-24 21:21  烈火如歌007  阅读(385)  评论(0编辑  收藏  举报