深入学习CSS伪类使用

开发 前端
你对CSS伪类语法是否熟悉,这里向大家描述一下:first-child伪类,锚伪类和:lang伪类的用法,另外CSS伪类用于向某些选择器添加特殊的效果。

本文向大家描述一下CSS伪类的用法,CSS伪类用于向某些选择器添加特殊的效果,这里主要包括锚伪类,CSS伪类和类的区别,以及:first-child伪类和:lang伪类的用法等内容,相信本文介绍一定会让你有所收获。

CSS伪类的语法:

  1. selector:pseudo-class{property:value}  
  2.  

CSS类也可与伪类搭配使用。

  1. selector.class:pseudo-class{property:value}  
  2.  

锚伪类

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

  1. a:link{color:#FF0000} /*未访问的链接*/  
  2. a:visited{color:#00FF00} /*已访问的链接*/  
  3. a:hover{color:#FF00FF} /*鼠标移动到链接上*/  
  4. a:active{color:#0000FF} /*选定的链接*/  
  5.  

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

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

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

CSS伪类与CSS类

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

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

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

CSS2-:first-child伪类

您可以使用CSS伪类中:first-child伪类来选择元素的***个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。考虑以下标记:

  1. <div> 
  2. <p>Thesearethenecessarysteps:</p> 
  3. <ul> 
  4. <li>IntertKey</li> 
  5. <li>Turnkey<strong>clockwise</strong></li> 
  6. <li>Pushaccelerator</li> 
  7. </ul> 
  8. <p>Do<em>not</em>pushthebrakeatthesametimeastheaccelerator.</p> 
  9. </div> 
  10.  

在上面的例子中,作为***个元素的元素包括***个p、***个li和strong和em元素。

给定以下规则:

  1. p:first-child{font-weight:bold;}  
  2. li:first-child{text-transform:uppercase;}  
  3.  

***个规则将作为某元素***个子元素的所有p元素设置为粗体。第二个规则将作为某个元素(在HTML中,这肯定是ol或ul元素)***个子元素的所有li元素变成大写。

请访问该链接,来查看这个:first-child实例的效果。

提示:最常见的错误是认为p:first-child之类的选择器会选择p元素的***个子元素。

注释:必须声明<!DOCTYPE>,这样:first-child才能在IE中生效。

为了使您更透彻地理解:first-child伪类,我们另外提供了3个例子:

◆例子1-匹配***个<p>元素

在下面的例子中,选择器匹配作为任何元素的***个子元素的p元素:

  1. <html> 
  2. <head> 
  3. <styletypestyletype="text/css"> 
  4. p:first-child{  
  5. color:red;  
  6. }  
  7. </style> 
  8. </head> 
  9.  
  10. <body> 
  11. <p>sometext</p> 
  12. <p>sometext</p> 
  13. </body> 
  14. </html>TIY  
  15.  

 ◆例子2-匹配所有<p>元素中的***个<i>元素

在下面的例子中,选择器匹配所有<p>元素中的***个<i>元素:

  1. <html> 
  2. <head> 
  3. <styletypestyletype="text/css"> 
  4. p>i:first-child{  
  5. font-weight:bold;  
  6. }  
  7. </style> 
  8. </head> 
  9.  
  10. <body> 
  11. <p>some<i>text</i>.some<i>text</i>.</p> 
  12. <p>some<i>text</i>.some<i>text</i>.</p> 
  13. </body> 
  14. </html>TIY  
  15.  

 ◆例子3-匹配所有作为***个子元素的<p>元素中的所有<i>元素

在下面的例子中,选择器匹配所有作为元素的***个子元素的<p>元素中的所有<i>元素:

  1. <html> 
  2. <head> 
  3. <styletypestyletype="text/css"> 
  4. p:first-childi{  
  5. color:blue;  
  6. }  
  7. </style> 
  8. </head> 
  9.  
  10. <body> 
  11. <p>some<i>text</i>.some<i>text</i>.</p> 
  12. <p>some<i>text</i>.some<i>text</i>.</p> 
  13. </body> 
  14. </html>TIY  
  15.  

 #p#CSS2-:lang伪类

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

  1. <html> 
  2. <head> 
  3.  
  4. <styletypestyletype="text/css"> 
  5. q:lang(no)  
  6. {  
  7. quotes:"~""~"  
  8. }  
  9. </style> 
  10.  
  11. </head> 
  12.  
  13. <body> 
  14. <p>文字<qlangqlang="no">段落中的引用的文字</q>文字</p> 
  15. </body></html> 
  16.  

 CSS伪类

浏览器支持:IEInternetExplorer,F:Firefox,N:Netscape。

W3C:“W3C”列的数字显示出伪类属性由哪个CSS标准定义(CSS1还是CSS2)。

【编辑推荐】

  1. CSS伪类的概念及作用
  2. IE中中CSS伪类:hover的使用及其BUG
  3. CSS样式表设计十个雕虫小技
  4. 深入学习六大CSS选择符的使用
  5. 解读DIV CSS网页布局中CSS无效十个原因

 

责任编辑:佚名 来源: w3school.com.cn
相关推荐

2010-09-07 10:57:34

CSS伪类

2010-08-31 13:06:45

CSS

2010-08-26 09:58:01

CSS clear

2010-09-14 17:20:03

CSS DIV相对定位

2010-09-08 13:14:03

CSS滤镜

2010-09-03 14:18:45

CSS选择符CSS

2010-09-01 08:58:58

2010-08-25 11:05:03

CSSpaddingmargin

2010-09-02 09:09:38

display:inlCSS

2010-08-19 12:55:55

CSSMarginPadding

2010-08-23 09:01:45

MarginPadding

2015-09-29 08:57:46

javascript对象

2009-11-17 14:13:34

PHP配置

2010-09-06 12:32:10

CSS伪元素

2010-09-07 11:05:34

CSS边框

2010-08-16 11:05:54

DIV+CSS

2010-07-05 09:59:27

UML类关系图

2024-01-22 00:10:00

C++接口编程

2009-11-16 15:40:58

PHP数组函数

2010-09-28 09:22:34

DOM模型Html
点赞
收藏

51CTO技术栈公众号