Відгадайте загадку.

[gdekjifgb]

Код: [Вибрати]

a{
    color: #0515a0;
    display: inline;
}
a:visited{
    color: #116;
}
a:hover,summary:hover{
    color: #000;
    background: #eee;
}


.pad{
padding-left: 5px;
padding-right: 5px;
}
.warn{
    background: #666;
    color: #6c6;
    font-weight: bold;
}

З верху сторінки:

Код: [Вибрати]

<div class="pad warn"> <a class="warn" href="/help.php">help</a> </div>
В низу сторінки:

Код: [Вибрати]

<div class="pad warn"> <a class="warn" href="/index.php">News</a> </div>
Два рази використав .warn бо якщо перший раз без цього класу, то фон буде тільки під текстом.

---

Результат:
У верхньому меню посилання виділено зеленим кольором на темному фоні.


Внизу сторінки темний фон є, але зеленим кольором не виділено.


Я вже вияснив причину, але цікаво знати першопричину.

---
Увесь css і html код без помилок http://plnkr.co/edit/p6drNP5VwTnw5cs6f4kF

[gdekjifgb]

Впевний що ніхто точно нічого не зможе сказати. ТОму довеедеться самому назвати причину, але мене цікавить першопричина.

Нижнє посилання не зеленіє тому що:

У мене в php-коді є перевірка підтримки кук на стороні користувача. В тій перевірці перевіряється кука ct. Якщо вона не встановлена, то встановлюється і робиться редірект на цю саму сторінку. КлRсична  перевірка - нічого надзвичайного.

Код: [Вибрати]

setcookie('ct', 1);
header("Location:....?ct=1);
exit;

І через цей редірект (а може і ні?) нижнє посилання не хоче зеленіти. Є відеодокази  http://youtu.be/8ODi-vKnPTE  Я "грішу" на header("Location:...");

ЧОМУ так відбувається?

[Володимир Лісівка]

При першому завантаженні все зелененьке. Після клацання по посиланню, спрацьовує селектор :visited, який більш точний, тому він має вищий пріоритет ніж клас warn. В інспекторі Хроміума це все видно. У Вогнелисі, цього не видно, нажаль.

[gdekjifgb]

  все так просто.

З’явилась чудова мотивація для читання книги (паперової).

[Володимир Лісівка]

Англійською: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity