Iconize Textlinks with CSS 0.5 中文文档

　
用 CSS 展示超链接提示

如果链接带我到外链、打开窗口或者链接到文件（就像到另一个 HTML 页面），我喜欢使用小的靠近链接的图标来显示。
这里给出了怎样实现它的一种方法，并且支持 IE7、Firefox 和 Safari。

下载 ZIP

图像

首先，找到一些好看的 GIF 小图标（或更好的，或你自己创建它们），用来显示。
最好它们全部都是相同的大小（下面的都是 14 x 16 像素的），并且背景都是透明的。

	链接到弹出窗口
	链接到外部站点
	表示一个邮件链接
	链接到 PDF 文件
	链接到 Word 文件
	链接到 Excel 文件

范例 1 - 链接到 PDF 文件 - HTML

就像这个例子，我们开始链接到 PDF 文件。
看一看下面的 HTML 代码：

<a href="files/holidays.pdf">View Holidays</a>

链接产生的效果如下：

注意，这里没有“类”“ID”等东西辨别该链接来自哪里。
我们唯一知道它引导我们到 PDF 文件的原因是在 href 属性值最后几位的“.pdf”。

使用一些支持 IE7、Firefox 和 Safari 的 CSS 选择器，你可以应用样式声明到以标签属性为基础的值中。

范例 1 - 链接到 PDF 文件 - CSS

如果我们应用样式到上面的 HTML 代码：

a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}

我们将得到像下面这样的：

它是怎么工作的？

上面的 CSS 规则将寻找所有 href 属性中以“.pdf”结束的 a 标签，然后给予该链接右侧一些额外的填充以让出足够的空间，来将小的 PDF 图标固定为背景图像。
美元符号表示结束。
因为 HTML 的 href 有一个“files/holidays.pdf”值，它将匹配上面的 CSS 声明，一个小的 PDF 图标将被显示在靠近链接的位置上。

范例 2 - mailto: 链接

足够简单。
现在，什么是 mailto: 链接呢？
看看下面的 HTML 代码：

<a href="mailto:billg@microsoft.com">Contact Me</a>

并应用下面的样式：

a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(icon_mail.gif) no-repeat center right;
}

注意规则中的脱字符号（^）。
脱字符号和等号表示“以什么开始”。
规则将寻找所有 href 属性以“mailto:”开始的 a 标签，然后给予链接右侧一些额外的填充，用来显示小的邮件图标的背景图像。

下面是显示的结果：

范例 3 - 链接到弹出窗口

开发者以一个非常标准的 Web 流行行为来区分标记 - 在链接中使用一些像“popup”的值来替代“类”或“ref”属性。
就像：

<a class="popup" href="help.html">Help Page</a>

使用同样的“类”或“ref”来显示我们的小图标。

a[class ="popup"] {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}

规则将寻找所有 class 属性被设置为“popup”的 a 标签，然后给予链接右侧一些额外的填充，来显示弹出图标的背景图像。

寻找多个值中的一个

但是，如果我们的 class 或 ref 属性中有多个值呢？
链接如下 HTML 代码：

<a class="popup specialstyle" href="help.html">View Help</a>

现在，class 属性不等于“popup”，而被替代为“popup specialstyle”。
因此，规则将无法工作。
它看起来好像被空格所分隔。
你可以使用如下：

a[class ~="popup"] {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}

波浪线（在大多数键盘的左上角被找到，需要 shift 键）和等号一起表示“寻找以空格分隔单词组出来的该单词”。
它将完美地尝试去匹配多个值中的一个。

摘要

这些选择器都不是新的，并且在这里提及的内容远远不够全面。
在 IE7 中有什么新的？因此我挑选了一些能在 IE7 和其它流行的浏览器中能够工作的 CSS 选择器，并且我知道它们在上面的效果中都是有用的。
如果它能帮助你查阅代码和使用一些图片进行显示，你可以 下载 ZIP（它包含了一些样例）。

---

原版英文：http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html