CSS入门了解CSS的伪类

时间:2007-10-24 19:36:00 

类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属性,所以此类选择符叫类选择符。在CSS中样式通常依附与一个元素在文档树中的位置,这个简单的模型对于许多情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构。例如,在HTML中,没有元素能够引用一个段落的第一行,所以也没有简单的CSS选择符应用它。所以,CSS引进了伪类(pseudo-class)和伪元素(pseudo-element)来允许基于文档树意外信息的格式化。

第一种:selector:pseudo-class {property: value} 也可以用HTML的class属性来设定伪类。

例句:

以下是引用片段:
  a:link {color:red}


  第二种:selector.class:pseudo-class {property: value} 伪类是最常用的伪类。

例句:

以下是引用片段:
  a.c1:link {color:red}


  锚(a)伪类

CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的伪类。锚(a)伪类是最常用的伪类。例句如下:

以下是引用片段:
  a:link {color: #FF0000} /* 未被访问的链接 红色 */ 
  a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ 
  a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ 
  a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 


  也可以用HTML的class属性来设定伪类。例句如下:

以下是引用片段:
  a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */ 
  a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ 
  a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ 
  a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 


  例句:actived的顺序书写。

注:由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。

注意

尽管CSS给予你绕开的控制权,用不同的颜色表示已经访问过的连接是一个很好的习惯,因为很多用户还是这样预期的。伪类(除了hover)不常用,恐怕也没有过去常用。因此,它没有过去那样有用了。但如果你能收集常用用户的意见,你会发现应该使用它。

传统上,连接文本是蓝色的,已访问的连接是紫色的。也许,这是最有效、最有用的颜色。然而,伴随着CSS的广泛发展,这种颜色不会是平常的了,用户也不再假设连接必须是蓝色或紫色的。

还应注意

你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是,Internet Explore并不支持。这真是一个极大的烦恼,因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快。

标签:class,伪类,CSS
0
投稿

猜你喜欢

  • 巧用Dreamweaver MX制作阴影字

    2009-08-31 17:36:00
  • 详解Python中的自定义密码验证

    2021-06-05 00:38:59
  • Go语言函数的延迟调用(Deferred Code)详解

    2024-02-19 13:16:19
  • 浅谈Python中range和xrange的区别

    2021-04-18 14:52:13
  • Python比较两个日期的两种方法详解

    2023-12-25 03:52:17
  • JavaScript使用ZeroClipboard操作剪切板

    2024-04-29 13:38:14
  • Pandas实现数据拼接的操作方法详解

    2023-08-16 02:45:40
  • JS正则(RegExp)判断文本框中是否包含特殊符号

    2023-05-12 18:18:55
  • Pytorch 实现focal_loss 多类别和二分类示例

    2021-09-16 17:53:36
  • asp经典入门教程 在ASP中使用SQL 语句

    2013-06-01 20:23:21
  • asp随机生成文件名的函数

    2009-02-11 13:41:00
  • 如何使用Python读取.xlsx指定行列

    2022-10-28 21:57:44
  • Python学习笔记之函数的参数和返回值的使用

    2021-12-01 19:06:39
  • Python编程实现生成特定范围内不重复多个随机数的2种方法

    2022-05-08 08:49:51
  • 如何设计广告的用户体验?

    2007-12-20 13:12:00
  • Python3.10.4激活venv环境失败解决方法

    2022-11-15 10:39:39
  • 使用SQL语句,查第10-20条记录

    2008-02-19 18:34:00
  • Python实现按当前日期(年、月、日)创建多级目录的方法

    2022-05-01 09:22:01
  • django-csrf使用和禁用方式

    2023-08-13 15:13:34
  • 什么设计师应该学习编写代码[译]

    2009-07-08 14:58:00
  • asp之家 网络编程 m.aspxhome.com