使用 CSS 样式化电子邮件链接 / href="mailto:"
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10632468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling email link / href="mailto:" with CSS
提问by Roland
Thanks to StackOverflow I finally found a way to style my email link, but I wonder why it doesn't work without the solution I found on here.
多亏了 StackOverflow，我终于找到了一种设置电子邮件链接样式的方法，但我想知道为什么如果没有我在此处找到的解决方案，它就无法工作。
Since the link is part of the span with the attributed class "about", which has font size and style defined, shouldn't the email link show up in 11px and sans serif?
由于链接是属性类“about”的一部分，定义了字体大小和样式，电子邮件链接不应该以 11px 和 sans serif 显示吗？
and while
而同时
a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}
works great, as soon as i try to change it into
效果很好，只要我尝试将其更改为
.about a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}
it does not function as it's supposed too.
它也无法正常工作。
do tags not listen to span formatting or class nesting?
标签不听跨度格式或类嵌套吗？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
}
.bottom-left {
position: absolute;
font:sans-serif;
bottom: 15px;
left: 15px;
}
.bold {
font-family: serif;
}
.about {
font-size: 11px;
font-family: sans-serif;
}
/*a[href^="mailto:"]
{
font-family: sans-serif;
color: black;
font-size: 11px;
}*/
.address {
font-size: 11px;
border-bottom: 1px grey dotted;
}
</style>
<title>TEMP</title>
</head>
<body>
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project space . |
<span="address">Website Information</span> — <a href="mailto:[email protected]">[email protected]</a>
</span>
</div>
</body>
</html>
回答by Shailender Arora
Hi actually you have commented your email link css:-
嗨，实际上你已经评论了你的电子邮件链接 css:-
so now write the css like this method its working fine......
所以现在像这种方法一样编写css它工作正常......
a[href^="mailto:"]
{
font-family: sans-serif;
color: red;
font-size: 11px;
}
see the demo:- http://jsbin.com/ijofoq/edit#html,live
看演示：- http://jsbin.com/ijofoq/edit#html,live
UPDATED
更新
Now its working fine...edit your HTML and add in your HTML
现在它工作正常......编辑你的 HTML 并添加你的 HTML
<div class="bottom-left">
<div class="about">
<span class="bold">XYZ</span> is a project space . |
<span="address">Website Information</span> — <a href="mailto:[email protected]">[email protected]</a>
</div>
basically you have to remove the spantag from .aboutclass.
基本上你必须删除跨度从标签。关于班级。
check this :- http://jsbin.com/ijofoq/2/edit
回答by The Felis Leo
I think .abouttake precedence over a.
cf. Css Rule Specificity.
我认为.about优先于a. 参见 CSS 规则特异性。
Basically, a css ruleset is assign a priority like a version number like this:
基本上，一个 css 规则集被分配一个优先级，比如像这样的版本号：
{#id}.{#class}.{#element}.{order}
with
和
- {#id} : count of id selectors
- {#class} : count of classes, pseudo-classes, attributes
- {#element} : count of elements, pseudo-elements
- {order} : the index of this rule across all files
- {#id} : id 选择器的数量
- {#class} : 类、伪类、属性的数量
- {#element} : 元素计数，伪元素
- {order} : 此规则在所有文件中的索引
So, we have the following order:
所以，我们有以下顺序：
- 0.2.1.*
.about a[href^="mailto:"](0 id, 1 class + 1 attr, 1 element) - 0.1.1.a
span.about(0 id, 1 class, 1 element) - 0.1.1.b
a[href^="mailto:"](0 id, 1 attr, 1 element) - 0.1.0.*
.about(0 id, 1 class, 0 element)
- 0.2.1.*
.about a[href^="mailto:"](0 id, 1 class + 1 attr, 1 element) - 0.1.1.a
span.about(0 id, 1 class, 1 element) - 0.1.1.b
a[href^="mailto:"](0 id, 1 attr, 1 element) - 0.1.0.*
.about（0 id，1 类，0 元素）
span.aboutand a[href^="mailto:"]have same specifity (1 class or attribute, and 1 element), so the order is important, the last wins.
span.about并且a[href^="mailto:"]具有相同的特性（1 个类或属性，以及 1 个元素），所以顺序很重要，最后一个获胜。
If you remove the spanthen the rule is less specific and loose.
如果您删除了，span那么规则就不那么具体和松散了。
(Also, distinguish between rules directly applied to an element, and other inhertited from parent elements...)
（另外，区分直接应用于元素的规则和其他从父元素继承的规则......）
