Блог

Главная - Вопросы по программированию - Правильно оформлять вложенные ссылки с помощью CSS?

Правильно оформлять вложенные ссылки с помощью CSS?

#css #nested #html-lists

#css #вложенные #html-списки

Вопрос:

Я просто не могу понять, почему я не могу заставить приведенную ниже комбинацию CSS / HTML работать должным образом.
Ссылки отображаются в стиле по умолчанию (синим и подчеркнутым). Может быть, я просто устал или я пропустил что-то важное?

HTML:

 <ul class="main">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

CSS:

 ul.main li a:link, ul.main li a:visited, ul.main li a:hover, ul.main li a:active {
    color: #FFF;
    text-decoration: none;
}

Комментарии:

1. Почему бы не оформить сам элемент привязки, т.е. ul.main li a — похоже, он отсутствует в вашем списке!

2. Я не думал, что потребуется добавление ul.main li a ? Попробовал, и никаких изменений…

3. :visited Селектор больше не используется большинством браузеров (из-за небольшой проблемы с безопасностью), поэтому указывать его больше бессмысленно. Поэтому вы можете безопасно удалить это из своего кода. (это все еще считается допустимым селектором, так что это не будет иметь никакого значения для вашего вопроса, но я просто подумал, что укажу на это)

Ответ №1:

Если у вас нет других стилей, влияющих на achors, следующего должно быть достаточно

 ul.main li a, ul.main li a:visited {
    color: #FFF;
    text-decoration: none;
}

Ответ №2:

Поскольку все ваши стили одинаковы, просто попробуйте

 ul.main a {
    color: #fff;
    text-decoration: none;
}

Комментарии:

1. @Industrial, советую вам использовать FireBug и посмотреть реальные стили, которые применяются к вашим ссылкам. Это может быть так просто, что ваш CSS не включен в страницу.

2. как включен ваш css? потому что это работает для меня. Это означает, что либо проблема с вашим <link /> тегом, либо ошибка css выше, которая обесценивает ваш код, либо проблема с кешем в браузере.

3. @VinarC / Industrial, я также рекомендую попробовать это в другом браузере, в идеале в браузере webkit, чтобы вы могли «проверять элемент» (это был бы chrome или safari).

4. Спасибо за вашу помощь. Ваше решение отлично работало, но по какой-то причине CSS был кэширован firefox…