CSS 中的电子邮件链接样式答案

【问题标题】：Styling email links in CSSCSS 中的电子邮件链接样式
【发布时间】：2011-04-07 01:47:56
【问题描述】：

我刚开始使用 HTML / CSS，在格式化嵌入在 <p> 标记中的电子邮件链接时遇到了一些问题。我可以使用哪种 CSS 选择器来访问此处的 <a> 元素？

我希望能够将其编辑为链接、悬停在上面等，因此使用 a:link 或类似名称的选择器会有所帮助。谢谢！

<div id="content" class="rounded-corners">
    <h2>Contact Me</h2>
    <p>email: <a href="mailto:foo@bar.com">foo@bar.com</a></p>
    <p>aim: deadunderdecor</p>
</div>

【问题讨论】：

标签： css selector

【解决方案1】：

a[href^="mailto:"] {
   ...
}

【讨论】：

效果很好，我之前尝试过这个没有用，然后在看到你的答案后再次无法让它工作。然后我记得我已经将我的 head 标签中的链接更改为不同的样式表，以便测试某些东西并且从未将其切换回来。嗬！不过非常感谢。
在这种情况下 :hover 会去哪里？编辑：没关系，从另一个来源发现它在右括号之后。
@alex 出于某种原因，我无法获得 text-decoration:underline;去工作。 a[href^="mailto:"]{text-decoration:underline;} 应该工作吗？我在页面上的其他锚点上使用它，它工作正常。
@Nick 应该，但可能会覆盖它。使用 Firebug 等工具对其进行检查。

【解决方案2】：

CSS 选择器？：

#content > p > a

【讨论】：

这也有效，但我选择了 alex 的答案，因为它在一般情况下更有用。谢谢！

【解决方案3】：

使用

#content > p > a

会起作用，但与仅使用相比，性能昂贵且通用性较差

#内容一个

CSS 通过在声明中使用每个选择（#content、a 等）来获取更具体的元素。默认情况下，在另一个选择器之前的选择器可以在它和它之前的元素之间有任意数量的元素。我建议的替代方法是为元素内部的任何链接设置样式，并带有内容 ID。

Alex 提出的解决方案更具限制性。使用 ">" 修改选择，使其不匹配任何 n 嵌套元素，而是仅匹配左侧选择器的直接子元素。

即它适用于 `

废话

但不是为了

废话

因为在第二种情况下，P 标签不再是#content 元素的直接子元素。

就 CSS 样式而言，您需要使用 :hover、:visited 和 :active 伪类在用户与其交互时修改其外观。

即

#content a:hover { 颜色: #ff0; } /* 改变悬停时的颜色 */

互联网上有很多很好的教程可以更全面地解释这一点。如果你搜索 CSS 锚伪类，你会得到很多好的答案。

【讨论】：

我认为您的代码格式在某处搞砸了，但感谢您提供有关选择器的信息。我不知道 > 是什么意思，所以这很有帮助。