深入学习CSS伪类语法

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

CSS伪类

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

CSS定位属性

CSS伪类的语法：

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

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

锚伪类

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

 
 
 
    
  
  
  
  1. a:link{color:#FF0000}/*unvisitedlink*/ 
    2. 
  
  
  
  2. a:visited{color:#00FF00}/*visitedlink*/ 
    3. 
  
  
  
  3. a:hover{color:#FF00FF}/*mouseoverlink*/ 
    4. 
  
  
  
  4. a:active{color:#0000FF}/*selectedlink*/ 
    5. 
  
  
  
  5.

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

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

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

CSS伪类和CSS类

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

 
 
 
    
  
  
  
  1. a.red:visited{color:#FF0000} 
    2. 
  
  
  
  2. CSSSyntax
    3.

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

CSS2-:first-child伪类

CSS伪类中:first-child伪类对另一个元素的第一个子元素进行匹配。

例子1：

在这个例子中，选择器对div元素中的第一个子元素为p的元素进行匹配-对div元素内的第一个段落进行缩进：

 
 
 
    
  
  
  
  1. div>p:first-child{ 
    2. 
  
  
  
  2. text-indent:25px; 
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4.  
    div中的第一段。这个段落将被缩进。
    5. 
  
  
  
  5.  
    div中的第二段。这个段落不会被缩进。
    6.
下面的HTML中的段落将不会被匹配：
  •  

    Header

  •  

    div中的第一段，但不是div中的第一个子元素。这个段落不会被缩进。

  •  例子2：

    在这个例子中，选择器将对p元素中的第一个子元素为em的元素进行匹配-并且将p元素中的第一个em元素设置为粗体：

     
 
 
      
  
  
  
    1. p:first-childem{ 
      2. 
  
  
  
    2. font-weight:bold; 
      3. 
  
  
  
    3. }例如，下面的HTML中的em是段落的第一个子元素： 
      4. 
  
  
  
    4. 
  
  
  
    5. Iamastrongman.
      6. 
  
  
  
    6.

     例子3：

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

     
 
 
      
  
  
  
    1. a:first-child{ 
      2. 
  
  
  
    2. text-decoration:none; 
      3. 
  
  
  
    3. } 
      4. 
  
  
  
    4.

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

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

     
 
 
      
  
  
  
    1. 访问W3School学习CSS！ 
      2. 
  
  
  
    2. 访问W3School学习HTML！
      3. 
  
  
  
    3.

    CSS2-:lang伪类

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

     
 
 
      
  
  
  
    1. 
  
  
  
    2. 
  
  
  
      4. 
  
  
  
    4.  q:lang(no){quotes:"~""~";} 
      5. 
  
  
  
    5. 
  
  
  
    6. 
  
  
  
    7. 
  
  
  
    8.  
      文字段落中的引用的文字文字
      9. 
  
  
  
    9. 
  
  
  
    10. 
  
  
  
    11.

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

    网站名称：深入学习CSS伪类语法
    网站网址：http://www.shufengxianlan.com/qtweb/news42/324592.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    用户体验知识

    分类信息网站

    关键词排名　　 　成都企业网站设计　　 　成都全网营销　　 　重庆企业网站建设　　 　网站建设公司　　 　广安网站制作公司　　 　成都广告招牌制作　　 　成都广告设计　　 　阿坝网站设计　　 　企业网站设计　　 　南充网站建设　　 　雕琢时光茶叶　　 　响应式网站建设公司　　 　成都网站优化　　 　成都标牌标识牌制作公司　　 　奢侈品网站建设方案　　 　成都定制网站　　 　成都外贸网站建设　　 　高县网站建设　　 　香港云主机