Как мога да задам един стил да замени друг конфликтен стил в 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="/bgexample.com">blah</a></td>
</tr>
<tr class="odd">
  <td><a class="unread" href="/bgexample.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 }

person Thomas G Henry    schedule 14.02.2009    source източник


Отговори (5)


Първо, ако не искате собствената история на браузърите да пречи на вашите стилове, тогава използвайте псевдо-класа :visited, за да съответства на стила на непосетената връзка, след което просто приложете класове ръчно въз основа на вашите DB записи.

Що се отнася до конфликтните стилове, всичко опира до специфичността на селектора и ако два с едни и същи свойства конфликт (имат същата специфика) последният "печели".

Направете следното:

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, тъй като селекторът има по-висока специфичност. И изобщо не се нуждаете от непрочетения клас. Пропускането на класа read от елемента ще има същия ефект. - person Jack Sleight; 15.02.2009

Можете да използвате директивата !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

Първо, проверете своя HTML, за да се уверите, че class="read" и class="unread" се добавят към вашите връзки.

Второ, опитайте да добавите a във вашите .read и .unread CSS правила:

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

Ако това не работи, опитайте да добавите интервал преди !important. Не мисля, че това е задължително, но повечето примери съм виждал включете го.

person strager    schedule 14.02.2009

Опитвам:

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

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

Можете да определите спецификата на вашите CSS селектори.

a { /* style 1 */ }

ще бъде заменен от

div a { /* style 2 */ }

където div е родителски елемент на a

Повече подробности можете да намерите в Ръководство за избор.

person Mark Hurd    schedule 14.02.2009