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

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

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

<div id="content" class="rounded-corners">
    <h2>Contact Me</h2>
    <p>email: <a href="mailto:[email protected]">[email protected]</a></p>
    <p>aim: deadunderdecor</p>
</div>

Ответы

Ответ 1

a[href^="mailto:"] {
   ...
}

Ответ 2

Селектор CSS?:

#content > p > a

Ответ 3

Используя

#content > p > a

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

#content a

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

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

т.е. он будет работать  `

Л

`

Но не для

`

  

л

`

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

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

т.е.

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

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