понимание специфики css (a: active pseudo class)

Question

У меня есть набор неупорядоченных списков в моей навигационной панели, который ссылается на другие страницы, я пытался настроить свой css так, чтобы все ul anchors были одинаковыми: активный цвет ,

Так довольно высоко на моем CSS документ я сделал следующее:

/* will be overridden by more specific selectors as needed */ 
ul a:active{ 
    color: black; 
} 

Это не сработало. Ничто не должно перекрывать его и заставлять активное состояние оставаться одного цвета.

Я пытался сделать его более конкретным, добавив еще один селектор, смотрите ниже:

.nav ul a:active{ 
    color: black; 
} 

Он работает, за исключением того, я не понимаю, почему это должно быть дело, я не распределили значение к : активный в другом месте, поэтому первый селектор должен сделать трюк.

у меня есть, потом в таблице стилей, добавлены некоторые правила для нормального состояния анкеров, смотрите ниже:

.nav ul a { 
    display: block; 
    padding: 20px; 

    /*padding-right: 0 !important; wtf is this */ 
    /* important overrides media queries */ 
    font-size: 13px; 
    text-align: center; 
    color: #aaa; 
    text-decoration: none; 
    background-color: #f5f5f5; 
} 

Я не думаю, что это переопределение мой первый селектор ...

Answer 1

я не знаю, как специфический стиль выглядит для вашего сайта, но я могу дать вам общий совет:

Если вы используете Google Chrome, вы можете использовать https://developer.chrome.com/devtools, а затем осмотреть элемент, чтобы увидеть, из которого селектора (и какая таблица стилей) элемент получает свою спецификацию свойства.

Вы также можете сделать это с помощью Firefox: https://developer.mozilla.org/en-US/docs/Tools или Internet Explorer https://msdn.microsoft.com/en-us/library/gg589500%28v=vs.85%29.aspx

EDIT:

также нашли хорошую ссылку, где вы можете прочитать больше о специфике, так как ваша цель состоит в понимании его:

https://css-tricks.com/specifics-on-css-specificity/

Answer 2

Это потому, что классы и псевдоклассы имеют больше веса в специфичности. Для большинства наименее конкретным в вашем случае:

• .nav ul a:active: 2 класса (в том числе класса 1 псевдо)
• .nav ul a: 1 класс + 2 элемента
• ul a:active: также 1 (псевдо) класс + 2 элементов, но ранее в вашей таблице стилей, поэтому он имеет меньшую специфичность

Надеюсь, это объясняет, почему добавление .nav действительно имеет значение.

Answer 3

В соответствии со спецификациями в W3C Selectors Level 3:

• рассчитывать количество ID селекторов в селекторе (= а)
• подсчитать количество класса селекторов, атрибуты селекторы и псевдо-классы в селекторе (= b)
• подсчитывает количество селекторов и псевдоэлементов типа селектора (= c)
• игнорировать универсальное селе CTOR

Примеры:

*    /* a=0 b=0 c=0 -> specificity = 0 */ 
LI    /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL+LI  /* a=0 b=0 c=3 -> specificity = 3 */ 
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ 
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ 
#x34y   /* a=1 b=0 c=0 -> specificity = 100 */ 
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */ 

---

Так что, когда селекторы имеют одинаковую специфичность, последнее правило является тот, который считает, что то, что происходит в вашем случае.

Распределение ваших селекторов:

Le делать математику:

• Первая группа селектор: два селектора типа (с) ul & a и один псевдо-класс (б) :active
• Вторая селекторная группа: один класс-селектор (b) .nav и два типа селекторов (c) ul & a.

Конечный результат равен Специфичность:

ul a:active  /* a=0 b=1 c=2 -> specificity = 12 */ 
.nav ul a  /* a=0 b=1 c=2 -> specificity = 12 */ 

Полезные ресурсы:

• W3C селекторы Уровень 3: http://www.w3.org/TR/selectors/#specificity
• Специфичность Калькулятор: http://specificity.keegan.st/
• CSS Специфичность: Вещи, которые вы должны K сейчас: http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/