使用CSS设置电子邮件链接/href= "mailto:" 的样式

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

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

由于链接是具有属性类“about”的 span 的一部分,它定义了字体大小和样式,因此电子邮件链接不应该显示在 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;
}

它不像它应该的那样运作。

标签不听 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 cl="bottom-left">
        <span cl="about">
            <span cl="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>
33

嗨,实际已经评论了你的电子邮件链接 css:-

所以现在写 css 像这个方法它的工作罚款......

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

请参见演示:-http://jsbin.com/ijofoq/edit#html,live

UPDATED

现在它的工作正常...编辑您的 HTML 并添加您的 HTML

<div cl="bottom-left">
    <div cl="about">
        <span cl="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

2

我认为.about优先于a。参见Css Rule Specificity

基本上,一个 CSS 规则集是分配一个优先级像这样的版本号:

{#id}.{#cl}.{#element}.{order}

具有

{# id}:id 选择器的计数

{# cl}:类、伪类、属性的计数

{# element}:元素计数,伪元素

{order}:此规则在所有文件中的索引

所以,我们有以下顺序:

0.2.1.*.about a[href^="mailto:"](0 id,1 cl + 1 attr,1 element)

0.1.1.aspan.about(0 id,1 cl,1 element)

0.1.1.ba[href^="mailto:"](0 id,1 attr,1 element)

0.1.0.*.about(0 id,1 cl,0 element)

span.abouta[href^="mailto:"]具有相同的特异性(1 个类或属性,以及 1 个元素),因此顺序很重要,最后一个获胜。

如果你删除span,那么规则就不那么具体和宽松了。

(此外,区分直接应用于元素的规则和其他从父元素继承的规则...)

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(350)
CSS背景-图像-不透明度
上一篇
Vue包版本不匹配:vue@2.6.14 vue-server-renderer@ 2.7.10
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(73条)