Question

感谢StackOverflow，我终于找到了一种方式来设置我的电子邮件链接的样式，但我想知道为什么没有我在这里找到的解决方案就行不通。

由于链接是跨度的一部分，属性类“约”，其字体大小和样式已定义，因此电子邮件链接不应显示在11px和sans serif中吗？

和

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;
}

它也没有发挥作用。

标签不能监听范围格式或类嵌套吗？

    <!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>

Answer 1

您实际上已经评论了您的电子邮件链接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>

基本上你必须从。关于类中删除 span 标记。

检查一下： - http://jsbin.com/ijofoq/2/edit

Answer 2

我认为.about优先于a。比照Css Rule Specificity

基本上，css规则集分配的优先级就像这样的版本号：

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

与

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

所以，我们有以下顺序：

0.2.1。* .about a[href^="mailto:"] （0个ID，1个类+ 1个attr，1个元素）
0.1.1.a span.about （0个ID，1个类，1个元素）
0.1.1.b a[href^="mailto:"] （0 id，1 attr，1个元素）
0.1.0。* .about （0个ID，1个类，0个元素）

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

如果删除span，则规则不太具体且松散。

（另外，区分直接应用于元素的规则，以及从父元素中取代的其他规则......）

使用CSS设置电子邮件链接/ href =“mailto：”

2 个答案: