超链接的伪类

来自CloudWiki
跳转至： 导航， 搜索

问题

  • 超链接的默认样式总是蓝色带下划线的，如何改变超链接的外观呢？
  • 例如：对某个超链接，要求设置样式如下
初始状态：蓝色、无下划线；

访问之后：红色、无下划线；

鼠标悬停：显示下划线；

点击时：红色、有下划线；
  • 如何实现？

超链接的操作状态包含初始状态、鼠标悬停状态、点击状态和访问过状态共四个，对每种状态都可以设置独立的外观样式，这些样式需要使用伪类选择符来设置。

伪类选择符

  • 超链接的操作状态包含初始状态、鼠标悬停状态、点击状态和访问过状态共四个，对每种状态都可以设置独立的外观样式，这些样式需要使用伪类选择符来设置。
a { 样式规则; }     — 用父标记指定4种子状态共有的样式，由4个伪类继承

a:link { 样式规则1; }   — 设置超链接文本在超链接尚未被访问时的样式（默认字符蓝色带下划线）

a:visited { 样式规则2; } 	— 设置超链接文本已被访问过之后的样式（默认字符红色带下划线）



a:hover { 样式规则3; }  	— 设置鼠标指向、经过、悬浮在某个标记上方时该标记的样式

a:active { 样式规则4; }  	— 设置鼠标单击激活某个标记时该标记的样式
  • 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。

超链接上的应用

<html>
   <head>
     <style type="text/css">
        a:link {color: #FF0000}
        a:visited {color: #00FF00}
        a:hover {color: #FF00FF}
        a:active {color: #0000FF}
     </style>
   </head>
   <body>
      <p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
      <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
      <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
   </body>
 </html>

普通元素的应用

div:hover 设置元素在其鼠标悬停时的样式

IE7+

源代码： 


div:hover {
  color: blue;
}
...
<div>hover</div>

div:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式

IE8+ 

div:active  {
  color: blue;
}
...
<div>active </div>

为伪类指定类别

  • 更多的时候使用包含选择符定义伪类

id选择符

  • 如果只对某一个特定的<a>标记设置伪类样式，则可对该标记定义id属性，用“id属性”选择符或“a#id属性”选择符定义伪类样式表。
a#id属性:link  { 样式规则2; }
a#id属性:visited { 样式规则3; }
a#id属性:hover { 样式规则4; }

class选择符

  • 如果对页面中的某一部分<a>标记设置样式，则可对这些<a>标记定义一个相同的class类名，如果需要对<a>标记分组定义样式则可以按组分别定义class类名，用元素指定选择符分别定义各自的伪类样式表：
a.class类名:link  { 样式规则2; }
a.class类名:visited { 样式规则3; }
a.class类名:hover { 样式规则4; }
  • 源代码：
<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>

<body>
<p>请把鼠标移动到这些链接上，以查看效果：</p>

<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p>
</body>

</html>

包含选择符

  • 更多的时候使用包含选择符定义伪类
    • 一个页面某个区域中的超链接格式往往都是一样的，例如一级导航块、二级导航块、其他内容导航块等。
    • 例如：在div中包含a。

案例： 

<html>
<head>
<style type="text/css">
.menu a:hover {background: green;}
</style>
</head>

<body>
<div class="menu"> <a href="#">这个链接改变字体系列</a></div>
</body>

</html>

案例：为syxw.html页面中的各条新闻设置超链接，href属性值都设置为#，伪类样式分别为：初始状态与访问过后（黑色、无下划线），鼠标悬停（蓝色，下划线）

取自“http://www.openbrains.net/mediawiki/index.php?title=超链接的伪类&oldid=14699”