Определенный класс HTML с CSS

0

Я создаю код для веб-сайта, который я использую. Существует несколько разных областей для цвета ссылок, и они, похоже, перекрываются, и я не уверен, как это исправить.

Мой HTML-код

<div class="floatbox" style="width:200px;height:200px;padding:5px;font-size:15px;position:fixed;left:2px;bottom:10px;overflow:auto;font-color:#3c5eb2;">
</div>

Внутри этого у меня есть ссылки. Мой CSS

#floatbox a:link, a:visited, #a:active{color: #BF00FF;}
#floatbox a:hover {color: #BF00FF;text-decoration: underline;}

Я попытался использовать тег "! Important", и ничего не работает. Если тега нет, все ссылки на странице остаются белыми. Если я добавлю тег "! Important", половина ссылок на веб-сайт станет фиолетовой. Я начинающий кодер, и я, возможно, не настроил таргетинг на класс.

Любая помощь приветствуется!

скрипка

  • 1
    Кстати, посмотрев на скрипку, вам нужно вытащить свой HTML из 1990-х. Там слишком много способностей. Единственная таблица, которая должна быть там - это обзор гордости. Посмотрите definition lists div based layout и div based layout если вы хотите использовать sections HTML5. Сейчас это может показаться болезненным, но вы поблагодарите меня позже, особенно если вы хотите сделать простые настройки макета. Гораздо проще с без таблиц макетов.
  • 0
    Сообщите владельцам / кодерам сайта ... Я знаю, что это больно, вся сделка на основе таблиц на сайте чрезвычайно устарела. Поверь мне, я знаю. Это раздражает меня до чертиков, лол.
Показать ещё 4 комментария
Теги:

2 ответа

0
Лучший ответ

Для работы с CSS важно познакомиться с инструментами, которые вам нужны. Когда вы получаете неожиданное поведение, используйте либо инструменты разработчика в Chrome, либо Firebug For Firefox. Эти инструменты позволяют вам проверять элемент inplace в браузере и видеть, какие правила CSS влияют на них, и также важно, какие правила переопределяются.

Вам также необходимо понять принципы каскадирования и специфики

Обновить

У вас есть класс в html (как и должно быть) и идентификатор в CSS.

Попробуйте следующее:

div.floatbox a:link, 
div.floatbox a:visited, 
div.floatbox #a:active
{
    color: #BF00FF !important; 
}

div.floatbox a:hover {color: #BF00FF !important;text-decoration: underline;}

http://jsfiddle.net/54UQg/4/

ИЛИ

Поскольку .floatbox является дочерним элементом #white вы можете использовать правила специфики, чтобы избежать использования !important #white:

#white div.floatbox a:link,
#white div.floatbox a:visited,
#white div.floatbox #a:active
{
    color: #BF00FF;
}

#white div.floatbox a:hover {color: #BF00FF ;text-decoration: underline;}

http://jsfiddle.net/54UQg/5/

Ваша исходная проблема возникла из-за двух проблем: вы нацеливали идентификатор на свой CSS, когда он был классом, а во-вторых, идентификаторы занимают место выше, чем классы в правилах специфики.

Поделиться
  • 0
    Я использую их по крайней мере 100 раз в день, это единственный способ, которым я смогу писать на сайте, который я использую. Я видел, что "#white" имеет преимущество перед моими дополнениями, но не знал почему. Вот почему я пришел на этот сайт.
1

Если это ваш фактический код, есть несколько (простых) вещей, которые несовместимы с тем, что вы пытаетесь достичь:

1) вы определяете #floatbox: это селектор CSS, предназначенный для определенного идентификатора, равного "floatbox", тогда как вы хотите настроить таргетинг на класс. Правильный синтаксис для задания класса - это префикс имени ".". поэтому вы хотите ".floatbox" в вашем файле CSS

2) у вас есть то, что выглядит как маленькая опечатка в первой строке CSS: "#a: active" следует читать "a: active"

В школах w3C есть простое объяснение простых селекторов:

http://www.w3schools.com/css/css_selectors.asp

the: link,: visited и т.д. псевдоселекторы также чувствительны к порядку, который они объявлены, снова объясняется здесь:

http://www.w3schools.com/css/css_pseudo_classes.asp

Я никогда не помню этот порядок :)

ETA: Глядя на вашу скрипку, проблема в том, что у вас есть идентификатор - "белый" - который включает div с классом "floatbox". Стили идентификаторов имеют приоритет над стилями классов, даже если они применяются здесь очень конкретно. Я бы сказал, что проще всего изменить стиль "idwhite" на основе стиля ".white", тогда вы должны увидеть приоритет, примененный по своему усмотрению.

Поделиться
  • 0
    Я пытался все эти вещи [оба были просто глупые опечатки хаха], и это все еще не помогает. Было бы проще показать весь мой CSS, чтобы объяснить, почему перекрытие влияет на код. Ничто никогда не появляется на валидатере, хотя ..
  • 0
    Не видя фактического css / html, трудно понять, что это может быть - не нужно много, чтобы выбросить все. Альтернатива состоит в том, чтобы отделить минимальный html / css от отдельного файла и посмотреть, достигнете ли вы желаемого эффекта. Тогда вы знаете, является ли поведение результатом столкновения.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню