更好的电子邮件链接：使用 CSS 属性选择器

什么是 CSS 属性选择器？

CSS 提供了一种方法，可以根据链接的属性（而不仅仅是元素类型）对元素进行样式设置。 例如，您已经知道可以对标题元素进行样式设置

h1 { color: blue; }

但您实际上可以变得更加具体，只对具有 title 属性的标题元素进行样式设置

h1[title] { color: blue; }

您可以更进一步，只对具有特定属性值的标题元素进行样式设置

h1[title="Go Home"] { color: blue; } /* Has the exact value "Go Home" in the title attribute */
h1[title~="Go Home"] { color: red; }  /* Has the value "Go Home" somewhere in the title attribute */
h1[title^="Go Home"] {color: green; } /* Value of the title attribute starts with "Go Home" */

 

电子邮件链接的独特之处是什么？

电子邮件链接不同于所有其他链接，因为它总是以“mailto:”开头，这是浏览器用来通知操作系统用户要使用默认电子邮件程序将电子邮件发送到特定电子邮件地址的命令。 我们可以利用链接之间的这种相似性，以便我们只能对电子邮件链接应用 CSS 样式。

这里有一个问题

a[href^="mailto"] { color: blue; }

这将定位所有具有以“mailto”开头的href的链接。

 

完成样式设置

现在我们已经定位了这些链接，我们可以做的不仅仅是使它们变为蓝色。 我们还可以使用另一种强大的 CSS 技术，即“content”属性。 content 属性允许您向页面元素添加内容，甚至是直接从其自身属性中提取的内容！ 使用伪选择器，您可以指定想要添加内容的位置，在前面或后面。

让我们变得花哨，从我们的链接中提取 title 属性，并将它们附加到链接本身之后，在链接的悬停状态下

a[href^="mailto"]:hover:after { content: attr(title); }

这将起作用，但它将把该文本附加到链接的正后方，所以让我们确保格式看起来不错，并添加一点间距和一个>字符，以将链接与将在悬停时添加的文本隔开

a[href^="mailto"]:hover:after { content: " > " attr(title); }

漂亮！
[查看示例]

 

为什么这更好？

• 只将电子邮件地址本身列为链接并不会暗示“操作”。 我认为，当您单击链接时，它会在没有任何警告的情况下启动您的邮件客户端，这很突兀。
• 通过将链接命名为“发送电子邮件”——您正在暗示该操作
• 两全其美，现在您可以将链接命名为“发送电子邮件”，但也可以显示电子邮件地址。
• 前向增强（并且向后兼容）。 此技术仅在良好的现代浏览器中有效，但它降级得很好。 旧浏览器只会看到链接，并且它可以正常工作。