Расчет значения специфичности [15/18]

Курсы §16. Наследование и каскадирование
1

Здравствуйте!
Вот как-то добрался до данного занятия, а здесь наступил практически полный ступор(((

Объясните пожалуйста, как считается эта специфичность ? В комментах конечно ответы есть, но даже смотреть не хочу, понять они не помогают, а хочется понять!
Заранее всем спасибо!

`
.text li.error span {}

#wrapper .text #message p a {}

#main .content a:hover{}`

опишите пожалуйста по пунктам, как вы считаете и почему именно так!

2

Ну, давайте попробуем разобраться.
Воспользуемся теоретическим материалом к этому заданию. Чтобы рассчитать значение специфичности для определенного селектора, необходимо определить для него 4 значения (a, b, c, d). Вот по этим четырем пунктам мы и пройдемся.
Согласно первому пункту, значение 1 для a будет только в том случае, если стиль встроенный, т.е прописан в HTML-коде. В данном случае все три селектора не используются для определения стилей страницы (ни в HTML-коде, ни в CSS), поэтому первая цифра у каждого из трех будет 0.
Второй пункт - b (количество идентификаторов в селекторе). В первом такого нет - значит 0, во втором два идентификатора (#wrapper и #message) - значит 2, в третьем только один (#main) - значит 1.
Третий пункт - c (количество классов, псевдоклассов и селекторов атрибутов). В первом селекторе два класса (.text и .error) - значит 2, во втором только один (.text), а в третьем один класс (.content) и один псевдокласс (:hover) - суммарно 2.
Остался последний четвертый пункт - d (количество селекторов типов элементов и псевдоэлементов). В первом селекторе два типа элемента (это li и span) - значит последняя цифра будет 2, во втором тоже два (это p и a) - последняя цифра тоже 2, в третьем только один (a) - последняя цифра 1.
Собираем все полученные данные.
Первый селектор: 0, 0, 2, 2
Второй селектор: 0, 2, 1, 2
Третий селектор: 0, 1, 2, 1
Получается, что наибольшим значением специфичности обладает второй селектор.

Надеюсь, вам станет понятнее.

19 лайков
3

Спасибо большое, все очень доступно и понятно объяснили!!!

3 лайка
4

Спасибо огромное! Так гораздо понятнее.

1 лайк
5

Ребята, зачем так все усложнять-то?
Неужели нельзя объяснить проще:

  1. Inline-стиль - 1000.
  2. ID-стиль (#) - 100.
  3. Стиль класса (.название_класса) и псевдокласс (:hover) - 10.
  4. Селектор тега (p, body, h1) и псевдоэлемент (:first-child) - 1.
    Всё.
    Итого: #wrapper .text #message p a {} = 100 + 10 + 100 +1 + 1 = 212.
    #main .content a:hover{} = 100 + 10 +1 + 10 = 121.
3 лайка
6

Не надо дублировать сообщения.
Ваша инструкция тоже неплохая. Вопрос только по поводу последнего, четвертого пункта. Вы ничего не напутали? first-child - ведь тоже псевдокласс.

2 лайка