Как я могу установить один стиль для переопределения другого конфликтующего стиля в CSS?

Я показываю ссылки, которые помечаются как прочитанные в базе данных, когда пользователь щелкает их. Я хочу стилизовать нажатые и ненажатые ссылки на основе информации из базы данных, а не истории браузера пользователя. До сих пор, когда я использую:

 10 a:visited {
 11   color: #444;
 12 }
 13
 14 a:link {
 15   font-weight: bold;
 16   color:black;
 17 }
 18
 19 .read {
 20   color: #444!important;
 21 }
 22
 23 .unread {
 24   font-weight: bold!important;
 25   color:black!important;
 26 }

а также

<tr class="even">
  <td><a class="read" href="example.com">blah</a></td>
</tr>
<tr class="odd">
  <td><a class="unread" href="example.org">foo</a></td>
</tr>

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

Возможно ли, чтобы один стиль преобладал над другим, когда они конфликтуют?

Спасибо!

РЕДАКТИРОВАТЬ: обновленный код для уточнения

Решение

 10 a:link,
 11 a:visited {
 12   font-weight: bold;
 13   color: black;
 14 }
 15
 16 a.read {
 17   color: #444;
 18   font-weight: lighter !important; /* omission or even "normal" didn't work here. */
 19 }
 20
 21 a.unread {
 22   font-weight: bold !important;
 23   color: black !important;
 24 }

html fonts css lamp
person Thomas G Henry    schedule 14.02.2009    source источник

Ответы (5)


arrow_upward
8
arrow_downward

Прежде всего, если вы не хотите, чтобы собственная история браузера мешала вашим стилям, используйте псевдокласс :visited, чтобы он соответствовал стилю непосещенной ссылки, а затем просто примените классы вручную на основе ваших записей БД.

Что касается конфликтующих стилей, все дело в специфике селектора, и если два с одинаковыми конфликтующими свойствами (имеют одинаковую специфичность) «выигрывает» последний.

Сделайте следующее:

a:link, 
a:visited {
    font-weight: bold;
    color: black;
}

a.read {
    color: #444;
}
person Jack Sleight    schedule 14.02.2009
comment
Спасибо. я немного подправил его (см. редактирование выше), но это было в основном то, что сделало это. Я должен был явно использовать зажигалку. ...странный - person Thomas G Henry; 15.02.2009
comment
Не совсем уверен, почему нормальное не сработает, странно. Вам не нужно !important в свойстве font-weight, поскольку селектор имеет более высокую специфичность. И вам вообще не нужен непрочитанный класс. Тот же эффект будет иметь исключение класса чтения из элемента. - person Jack Sleight; 15.02.2009

arrow_upward
35
arrow_downward

Вы можете использовать директиву !important. например.

.myClass
{
   color:red !important;
   background-color:white !important;
}

Поместите !important после каждого стиля, как показано выше, когда вам нужно переопределить любые другие применяемые стили.

person Ash    schedule 14.02.2009
comment
Я обновил код в вопросе. !important не меняет результаты. Спасибо хоть! - person Thomas G Henry; 15.02.2009
comment
Нет проблем. Я думаю, что поддержка веб-браузером для стилизации тегов привязки с использованием псевдоселекторов различается. Пробовали в разных браузерах? - person Ash; 15.02.2009
comment
Как переопределить что-то, на чем уже есть !important? - person Aaron Franke; 18.02.2019

arrow_upward
1
arrow_downward

Во-первых, проверьте свой HTML, чтобы убедиться, что class="read" и class="unread" добавляются к вашим ссылкам.

Во-вторых, попробуйте добавить a в правила CSS .read и .unread:

a.read { /* ... */ }
a.unread { /* ... */ }

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

person strager    schedule 14.02.2009

arrow_upward
1
arrow_downward

Пытаться:

a.unread, a:visited.unread {style 1}

a.read, a:visited.read {style 2}
person Ria    schedule 14.02.2009

arrow_upward
0
arrow_downward

Вы можете определить специфику ваших селекторов CSS.

a { /* style 1 */ }

будет переопределен

div a { /* style 2 */ }

где div — родительский элемент a

Более подробную информацию можно найти в Selectutorial.

person Mark Hurd    schedule 14.02.2009