Htmldog权威CSS入门指点十八章(十)- CSS中的伪类

by ximicc on 2010/06/26

in CSS

汇聚博客资源,点亮博客价值 - 西米CC(http://ximicc.com)CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。

老外总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA即正确的顺序:a:link、 a:visited、a:hover、a:active。实际上,从CSS的“就近原则”也可以看出这个特点。在Dreamweaver中“新建CSS规则”对话框中,复合内容中的顺序也是一致的。请你注重一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以安全使用在链接上。

伪类像是指定选择器状态或关联选择器的门闩。它们的形式如:selector:pseudo class { property: value; },在选择器和伪属性之间使用冒号。

  link 没有点击过的链接
  visited以点击过的链接
  active获得焦点时的链接(比如在点击时)
   hover 鼠标在链接上面

  1. a.snowman:link {
  2. color: blue;
  3. }
  4. a.snowman:visited {
  5. color: purple;
  6. }
  7. a.snowman:active {
  8. color: red;
  9. }
  10. a.snowman:hover {
  11. text-decoration: none;
  12. color: blue;
  13. background-color: yellow;
  14. }

尽管CSS里可以省略它们,但维护不同颜色的链接对于新手是个很好的练习。由于伪类(相比hover)不是经常使用,作为公用属性是非常不幸的特性。由于这样,它不像以前那么重要,但假如为最优用户响应考虑,应该使用它。

传统默认,文本链接是蓝色,访问后是紫色,理论上可以使用很多不同颜色效果,但,再次,逐渐广泛使用CSS,使得链接变得不再普通,平均用户也不再认为链接必须是蓝色或紫色。

除了链接其他元素也可以使用hover伪类。不幸的是,ie7以下的浏览器不支持,这样有许多漂亮的效果不能在IE上实现。

喜欢的就爱屋及乌 被雷了就诛连九族

Leave a Comment

Previous post:

Next post: