Специфика CSS

специфичность

С помощью таблиц стилей мы применяем правила к элементам html (и xhtml, xml и т. Д.). Теперь проблема в том, что если два отдельных правила, противоречащих друг другу, применяются к одному элементу? Ну, пользовательские агенты имеют набор правил под названием Specificity, который решает эту проблему. И суть решения в том, что все селекторы не имеют одинаковую специфичность. У некоторых это больше, чем у других. И, следовательно, селектор с большей специфичностью отвергает своего противоречивого аналога.

Теперь конфликты не происходят так просто все время. Это может произойти из-за вложенных селекторов. Но и здесь правило остается прежним. Селектор (ы), исходящий из определенного правила, обладающего большей специфичностью, чем другой селектор (ы), исходящий из другого правила, переопределяет первое.

Теперь посмотрим, как мы можем рассчитывать, чтобы понять специфику. Вот правило для расчета:

• подсчитать количество атрибутов идентификатора в селекторе (скажем, х)
• подсчитать количество других атрибутов и псевдоклассов в селекторе (скажем, у)
• подсчитать количество имен элементов в селекторе (скажем, z)
• игнорировать псевдоэлементы.

Объединяя эти три числа, xyz дает специфичность.

Примеры расчета специфичности

* {}

В приведенном выше примере у нас нет никакого атрибута ID, поэтому значение x = 0, поскольку у нас нет другого атрибута или текстового элемента, поэтому значение y = 0; и у нас нет никаких имен элементов, поэтому значение z = 0. Таким образом, специфичность приведенного выше примера становится 0-0-0 -> 0

LI {}

В приведенном выше примере у нас нет никакого атрибута ID, поэтому значение x = 0, поскольку у нас нет другого атрибута или текстового элемента, поэтому значение y = 0; но у нас есть одно имя элемента в селекторе, поэтому значение z = 1. Таким образом, специфичность приведенного выше примера становится 0-0-1 -> 1

UL LI {}

В приведенном выше примере у нас нет никакого атрибута ID, поэтому значение x = 0, поскольку у нас нет другого атрибута или текстового элемента, поэтому значение y = 0; но у нас есть два имени элемента в селекторе, поэтому значение z = 2. Таким образом, специфичность приведенного примера становится 0-0-2 -> 2

UL OL + LI {}

<x = 0 y = 0 z = 3 -> специфичность = 3 В приведенном выше примере у нас нет атрибута ID, поэтому значение x = 0, поскольку у нас нет другого атрибута или текстового элемента, поэтому значение у = 0; но у нас есть три имени элемента в селекторе, поэтому значение z = 3. Таким образом, специфичность приведенного выше примера становится 0-0-3 -> 3

H1 + * [REL = up] {}

<x = 0 y = 1 z = 1 -> специфичность = 11 В приведенном выше примере у нас нет какого-либо атрибута ID, поэтому значение x = 0, поскольку у нас есть еще одно имя атрибута в селекторе, поэтому значение у = 1; и у нас есть одно имя элемента в селекторе, поэтому значение z = 1. Таким образом, специфичность приведенного примера становится 0-1-1 -> 11

UL OL LI.red {}

<x = 0 y = 1 z = 3 -> специфичность = 13 В приведенном выше примере у нас нет атрибута ID, поэтому значение x = 0, так как у нас есть еще одно имя атрибута в селекторе, поэтому значение у = 1; и у нас есть три имени элемента в селекторе, поэтому значение z = 3. Таким образом, специфичность приведенного примера становится 0-1-3 -> 13

LI.red.level {}

<x = 0 y = 2 z = 1 -> специфичность = 21 В приведенном выше примере у нас нет никакого атрибута ID, поэтому значение x = 0, так как у нас есть два других имени атрибута в селекторе, поэтому значение у = 2; и у нас есть одно имя элемента в селекторе, поэтому значение z = 1. Таким образом, специфичность приведенного примера становится 0-2-1 -> 21

#тестовое задание {}

<x = 1 y = 0 z = 0 -> специфичность = 100. В приведенном выше примере у нас есть атрибут 1 id (так, x = 1), вряд ли есть какие-либо другие атрибуты и псевдоклассы (так, y = 0 ), у нас даже нет имен элементов и псевдоэлементов (поэтому z = 0); поэтому специфика становится 100.

Предыдущая: Наследование CSS
Далее: блочная модель CSS