Вопрос по email, css, mailto, href – Стилизация ссылки на электронную почту / href = «mailto:» с помощью CSS

11

Благодаря StackOverflow я наконец нашел способ стилизовать свою ссылку электронной почты, но мне интересно, почему она не работает без решения, которое я нашел здесь.

Поскольку ссылка является частью промежутка с атрибутивным классом «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>

Ваш Ответ

2   ответа
2

Я думаю.about иметь приоритет надa. cf. Css Rule Специфика.

По сути, для набора правил css назначается приоритет, например, номер версии:

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

с

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

Итак, у нас есть следующий порядок:

  1. 0.2.1.* .about a[href^="mailto:"] (0 id, 1 class + 1 attr, 1 element)
  2. 0.1.1.a span.about (0 id, 1 class, 1 element)
  3. 0.1.1.b a[href^="mailto:"] (0 id, 1 attr, 1 element)
  4. 0.1.0.* .about (0 id, 1 class, 0 element)

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

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

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

23

Привет на самом деле вы прокомментировали свою ссылку электронной почты 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 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>

в основном вы должны удалитьspan тег от.about учебный класс.

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

спасибо Шейлендер! Я знаю, что это работает таким образом, я скорее спрашивал, почему это не работает без этого решения и почему элемент href не может быть вложен в класс .about. Roland
мне кажется, что это работает сdiv и неspan
Спасибо! приятно знать, что это не обязательно моя ошибка: P Roland

Похожие вопросы