Styling email link / href=“mailto:” with CSS

问题

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.

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?

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



</body>
</html>

回答1:

Hi actually you have commented your email link css:-

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

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

see the demo:- http://jsbin.com/ijofoq/edit#html,live

UPDATED

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>

basically you have to remove the span tag from .about class.

check this :- http://jsbin.com/ijofoq/2/edit

回答2:

I think .about take precedence over a. cf. Css Rule Specificity.

Basically, a css ruleset is assign a priority like a version number like this:

{#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

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)

span.about and a[href^="mailto:"] have same specifity (1 class or attribute, and 1 element), so the order is important, the last wins.

If you remove the span then the rule is less specific and loose.

(Also, distinguish between rules directly applied to an element, and other inhertited from parent elements...)

来源：https://stackoverflow.com/questions/10632468/styling-email-link-href-mailto-with-css

标签

css

href

mailto