使用CSS美化电子邮件链接/href="mailto:"

Question

使用CSS美化电子邮件链接/href="mailto:"

23

感谢StackOverflow，我终于找到了一种样式化我的电子邮件链接的方法，但我想知道为什么在没有在这里找到的解决方案的情况下它不起作用。

由于该链接是具有属性类“about”的span的一部分，该类定义了字体大小和样式，所以电子邮件链接不应该显示为11px无衬线字体吗？

而同时

a[href^="mailto:"]

{ 
  font-family: sans-serif;
  color: black;
  font-size: 11px;
}

很好用，只要我尝试将其改变为

.about a[href^="mailto:"]

{ 
  font-family: sans-serif;
  color: black;
  font-size: 11px;
}

它的功能并不像预期的那样。

是否 <span> 标签不能遵循样式或类嵌套？

    <!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 .&nbsp;&nbsp;&#124;&nbsp;
            <span="address">Website Information</span> &mdash; <a href="mailto:info@info.eu">info@info.eu</a>
        </span>
</div>



</body>
</html>

- Roland

2个回答

2

我认为.about比a更具优先级。参见CSS规则特异性。

基本上，css规则集被分配了一个类似版本号的优先级：

{#id}.{#class}.{#element}.{order}

{#id} : id选择器的数量
{#class} : 类，伪类，属性的数量
{#element} : 元素和伪元素的数量
{order} : 此规则在所有文件中的索引

因此，我们有以下顺序：

0.2.1.* .about a[href^="mailto:"] (0个id，1个类+ 1个属性，1个元素)
0.1.1.a span.about (0个id，1个类，1个元素)
0.1.1.b a[href^="mailto:"] (0个id，1个属性，1个元素)
0.1.0.* .about (0个id，1个类，0个元素)

span.about和a[href^="mailto:"]具有相同的特异性（1个类或属性和1个元素），因此顺序很重要，最后一个胜出。

如果删除span，则规则不那么具体且宽松。

（还要区分直接应用于元素的规则和从父元素继承的规则...）

- The Felis Leo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shailender Arora · Accepted Answer

你好，实际上，你已经在评论中写了你的电子邮件链接的CSS：

所以现在，请按照以下方法编写CSS，它可以正常工作...

a[href^="mailto:"]
{ 
  font-family: sans-serif;
  color: red;
  font-size: 11px;
}

查看演示：- http://jsbin.com/ijofoq/edit#html,live

更新

现在它可以正常工作了...编辑您的HTML并将其添加到您的HTML中。

<div class="bottom-left">
    <div class="about">
        <span class="bold">XYZ</span> is a project space .&nbsp;&nbsp;&#124;&nbsp;
        <span="address">Website Information</span> &mdash; <a href="mailto:info@info.eu">info@info.eu</a>
    </div>

基本上你需要从 .about 类中删除 span 标签。

查看此链接 :- http://jsbin.com/ijofoq/2/edit