为电子邮件设定样式:link / href =" mailto:"与CSS [英] Styling email link / href="mailto:" with CSS

查看:700
本文介绍了为电子邮件设定样式:link / href =" mailto:"与CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

感谢StackOverflow我终于找到了一种方式来风格我的电子邮件链接,但我想知道为什么没有这里找到的解决方案不工作。

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.

链接是具有属性类约的span的一部分,其具有定义的字体大小和样式,不应该在11px和sans serif中显示电子邮件链接?

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?

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

它不能正常工作。

do标签不侦听span格式化或类嵌套?

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



</body>
</html>


推荐答案

所以现在写css像这样的方法它的工作正常...

so now write the css like this method its working fine......

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

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

UPDATED

现在可以正常工作...编辑HTML并添加到您的HTML中

Now its working fine...edit your HTML and add in your 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>

类。

请检查: http://jsbin.com/ijofoq/2/edit

这篇关于为电子邮件设定样式:link / href =&quot; mailto:&quot;与CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆