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

Благодаря StackOverflow я наконец нашел способ подстроить мою ссылку по электронной почте, но мне интересно, почему она не работает без решения, которое я нашел здесь.Styling email link/href = "mailto:" с CSS

Поскольку ссылка является частью диапазона с атрибутом класса «about», который имеет размер шрифта и определенный стиль, не следует ли указывать ссылку электронной почты в 11px и без засечек?

и в то время как

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



</body> 
</html>

источник

2012-05-17 Roland

Привет на самом деле вы прокомментировали ваш адрес электронной почты ссылку 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:[email protected]">[email protected]</a> 
    </div>

в основном вы должны удалить поверочного тег. около класс.

проверить это: - http://jsbin.com/ijofoq/2/edit

источник

2012-05-17 08:59:24

ТНХ Shailender! Я знаю, что это работает так, я скорее спрашивал, почему он не работает без этого решения и почему элемент href не может быть вложен в класс .about. – Roland

выглядит как ошибка для меня, что она работает с 'div', а не' span' –

спасибо! хорошо знать, что это не обязательно моя ошибка: P – Roland

Я думаю .about имеют преимущество над a. ср. Css Rule Specificity.

В основном, CSS набор правил назначить приоритет, как номер версии, например так:

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

{#id}: кол-селекторы идентификаторов
{#class} : кол-во классов, псевдоклассы, атрибуты
{#element}: количество элементов, псевдоэлементов
{order}: индекс этого правила во всех файлах

Таким образом, мы имеем следующий порядок:

0.2.1.*.about a[href^="mailto:"](0 ID, 1 класс + 1 атр, 1 элемент)
0.1.1.aspan.about(0 ID, 1 класс, 1 элемент)
0.1.1.ba[href^="mailto:"](0 ID, 1 атр, 1 элемент)
0.1.0. *.about(0 ID, 1 класс, 0 элемент)

и a[href^="mailto:"] имеют одинаковую спецификацию (1 класс или атрибут и 1 элемент), поэтому порядок важен, последние выигрыши.

Если вы удалите span, тогда правило будет менее конкретным и свободным.

(Кроме того, различие между правилами непосредственно применяемых к элементу, и другие inhertited от родительских элементов ...)

источник

2017-02-23 13:19:03

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

ответ

Смежные вопросы