В чем разница: фокус: требуется: недействительно: фокус и: фокус: требуется: недействительно?

Question

Я пытался работать с проверкой электронной почты AngularJS с помощью стиля формы Bootstrap и наткнулся на этот блок CSS.

input:focus:required:invalid, 
textarea:focus:required:invalid, 
select:focus:required:invalid { 
    color: #b94a48; 
    border-color: #ee5f5b; 
} 

input:focus:required:invalid:focus, 
textarea:focus:required:invalid:focus, 
select:focus:required:invalid:focus { 
    border-color: #e9322d; 
    -webkit-box-shadow: 0 0 6px #f8b9b7; 
    -moz-box-shadow: 0 0 6px #f8b9b7; 
      box-shadow: 0 0 6px #f8b9b7; 
} 

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

Благодаря

Answer 1

Вот что говорит спецификация о calculating specificity:

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

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

селекторов внутри отрицания псевдо-класса подсчитываются как и любой другой, , но отрицание сам по себе не считается псевдоклассом.

Сочетание трех чисел a-b-c (в числовой системе с большой базой ) дает специфику.

Примечание: повторяющиеся вхождения одного и того же простого селектора допускаются и увеличивают специфичность.

Там ничего не написано об уникальности, так что написание псевдо-класс дважды делает селектор более конкретным, так же, как p.foo.foo is more specific than p.foo, но она точно такие же элементы.