Styling email link/href = "mailto:" z CSS

Dzięki StackOverflow w końcu znalazłem sposób na ukształtowanie mojego linku mailowego, ale zastanawiam się, dlaczego nie działa bez rozwiązania, które znalazłem tutaj.Styling email link/href = "mailto:" z CSS

Ponieważ łącze jest częścią zakresu z przypisaną klasą "o", która ma zdefiniowany rozmiar i styl czcionki, czy łącze e-mail nie powinno być wyświetlane w rozmiarze 11px i bezszeryfowym?

i podczas

a[href^="mailto:"] 

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

działa świetnie, jak tylko próbuję zmienić go w

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

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

nie działa jak to miało zbyt.

czy znaczniki nie nasłuchują formatowania w zakresie rozpiętości lub klasy?

<!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:[email protected]">[email protected]</a> 
     </span> 
</div> 



</body> 
</html>

Źródło

2012-05-17 Roland

Hi faktycznie masz skomentował swój link email CSS: -

więc teraz napisać css jak tej metody jego pracy w porządku ......

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

zobaczyć demo: - http://jsbin.com/ijofoq/edit#html,live

AKTUALIZACJA

Teraz jego pracy w porządku ... edycji HTML i dodać w kodzie 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:[email protected]">[email protected]</a> 
    </div>

zasadzie trzeba usunąć rozpiętości znacznik z. o klasie.

sprawdzić w ten sposób: - http://jsbin.com/ijofoq/2/edit

Źródło

2012-05-17 08:59:24

thx Shailender! Wiem, że działa w ten sposób, raczej zapytałem, dlaczego nie działa bez tego rozwiązania i dlaczego elementu href nie można zagnieździć w klasie .about. – Roland

wygląda jak błąd dla mnie, że działa z podziałem na 'div', a nie' span' –

dzięki! dobrze wiedzieć, że niekoniecznie jest to mój błąd: P – Roland

myślę .about mają pierwszeństwo przed a. cf. Css Rule Specificity.

Zasadniczo, zestaw reguł CSS jest przypisać priorytet jak numer wersji jak ta:

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

{ID}: liczba selektorów id
{#class} : liczba klas, pseudoklasy, atrybuty
{#element}: liczba elementów, pseudoelementy
{zamówienie}: indeks tej zasady we wszystkich plikach

Mamy więc kolejno:

0.2.1.*.about a[href^="mailto:"](0 id, 1 + 1 atr klasy 1 elementu)
0.1.1.aspan.about(0 id, 1 klasy 1 pozycja)
0.1.1.ba[href^="mailto:"](0 id, 1 atr 1 elementu)
0.1.0. *.about(0 id, 1 klasa 0 elementu)

span.about i a[href^="mailto:"] mają tę samą specyfikę (1 klasa lub atrybut i 1 element), więc kolejność jest ważna, ostatnie wygrywa.

Jeśli usuniesz span, wówczas reguła będzie mniej dokładna i luźniejsza.

(także odróżnić zasad stosowanych bezpośrednio do elementu i innych inhertited z elementów dominujących ...)

Źródło

2017-02-23 13:19:03

Styling email link/href = "mailto:" z CSS

Odpowiedz

Powiązane problemy