Question

我刚刚开始使用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>

Answer 1

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

Answer 2

CSS选择器？：

#content > p > a

Answer 3

使用

#content＆gt; p>

会起作用，但比仅使用

更具性能且更不通用

#content a

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

亚力克提出的解决方案更具限制性。使用“＆gt;”修改选择，使其与任何n嵌套元素不匹配，而只匹配左侧选择器的直接子元素。

即。它会起作用 `

布拉赫

`

但不适用于

`

嗒嗒

`

因为在第二个实例中，P标记不再是#content元素的直接子元素。

就CSS样式而言，你需要使用：hover，：visited和：active伪类来修改它在用户与它们交互时的外观。

即

#content a：hover {color：#ff0; } / *更改悬停时的颜色* /

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

在CSS中设置电子邮件链接样式

3 个答案: