Стилизация ссылок электронной почты в CSS - PullRequest
Новая
       2

Стилизация ссылок электронной почты в CSS

11 голосов
/ 07 апреля 2011

Я только начинаю с HTML / CSS, и у меня возникли небольшие проблемы с форматированием ссылки на электронную почту, встроенной в тег <p>. Какой вид селектора CSS можно использовать для доступа к элементу <a> здесь?

Я бы хотел иметь возможность редактировать его как ссылку, зависание и т. Д., Так что селектор, использующий a:link или что-то подобное, мог бы помочь. Спасибо! 

<div id="content" class="rounded-corners">
    <h2>Contact Me</h2>
    <p>email: <a href="mailto:foo@bar.com">foo@bar.com</a></p>
    <p>aim: deadunderdecor</p>
</div>

Ответы [ 3 ]

22 голосов
/ 07 апреля 2011 
a[href^="mailto:"] {
   ...
}
0 голосов
/ 07 апреля 2011

Использование

# content> p> a

будет работать, но более дорогая и менее общая производительность, чем простое использование

# содержание a

CSS работает, используя каждый выбор (#content, a и т. Д.) В объявлении, чтобы получить более конкретные элементы. По умолчанию селектор, который предшествует другому селектору, может иметь любое количество элементов между ним и тем, что ему предшествует. Альтернатива, которую я предложил, будет стилизовать любую ссылку, которая находится внутри элемента с идентификатором контента.

Решение, предложенное Алексом, является гораздо более ограничительным. Использование «>» изменяет выделение так, что оно не соответствует ни одному вложенному элементу и вместо этого сопоставляет только элементы, которые являются непосредственными дочерними элементами селектора слева.

т.е. это будет работать для `

Ли

`

Но не для

`

ли

`

Поскольку во втором случае тег P больше не является непосредственным дочерним элементом элемента #content.

Что касается стилей CSS, вам нужно использовать псевдоклассы: hover,: visit и: active, чтобы изменить его внешний вид во время взаимодействия с ними пользователя.

1031 * Т.е. *

# content a: hover {color: # ff0; } / * меняет цвет при наведении * /

В интернете есть много хороших руководств, которые объясняют это более полно. Если вы будете искать псевдо-классы с якорем CSS, вы получите множество хороших ответов.

0 голосов
/ 07 апреля 2011

Селектор CSS?: 

#content > p > a
...