重走一遍CSS（五）

基于层叠对连接选择器进行排序

• 对链接应用样式最容易的方式是使用锚类型选择器
  
a {
color: red;
}

• CSS提供了两个特殊的选择器，称为伪类选择器：
  
  • :link 伪类选择器用来寻找没有被访问的链接
  • :visited 伪类选择器用来寻找被访问过的链接
• 可以对链接应用样式的另外两个选择器,被称为动态伪类选择器是：
  
  • :hover 用来寻找鼠标悬停处的元素
  • :active 用来寻找被激活的元素，对于链接来说，激活发生在连接被单击时
• :focus 在通过键盘移动到链接上时，这让链接显示的样式与鼠标悬停时相同
• 选择器的次序十分重要
  

创建应用了样式的链接下划线

• 鼠标悬停其上和已激活的连接的text-decoration属性设置为underline
• 未访问和已访问的链接的text-decoration属性设置为none
• 为链接目标设立样式
  
  • 除了链接到特定的文档之外，还可以使用包含片段标识符的链接链接到页面的特定部分。
  • 实现方法：href末尾加一个#字符，然后加上要连接的元素的ID
  • :target 伪类可以为目标元素设置样式

使用属性选择器对外部链接应用样式

• 属性选择器可以让CSS判断链接是否是外部链接
• 属性选择器允许根据特定属性是否存在或属性值来寻找元素。CSS3扩展了它的功能，并提供了子字符串匹配。顾名思义，这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素
  
  • 形如：[att^=val]
  • a[href^=”http:”] {
    background: url(img/externalLink.gif) no-repeat right top;
    padding-left: 10px;
    }

使链接表现得像按钮

• 锚是行内元素，这意味着只有在单击链接的内容时他们才会激活。但是，有时候希望实现的更像按钮的效果。可以将锚的display属性设置为block
• a {
  display: block;
  width: 6.6em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1px solid #66a300;
  background-color: #8cca12;
  color: #fff;
  }

创建已访问链接样式

创建纯CSS的工具提示

/* css tooltip
================================== */

a.tooltip {
  position: relative;
}

a.tooltip span {
  display: none;
}

a.tooltip:hover {
  font-size: 100%; /* Fixes bug in IE5.x/Win */
}

a.tooltip:hover span {
  display:block;
  position:absolute;
  top:1em;
  left:2em;
    width: 8.5em;
  padding: 0.2em 0.6em;
  border:1px solid #996633;
  background-color:#FFFF66;
  color:#000;
}