Специфика CSS

Специфика

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

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

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

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

Объединение этих трех чисел x-y-z дает конкретность.

Примеры вычисления специфичности

* {}

В приведенном выше примере у нас нет атрибута 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 {}

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

UL OL + LI {}

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

H1 + * [REL = up] {}

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

UL OL LI. красный {}

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

LI.red.level {}

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

#test {}

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

Оцените статью
nanomode.ru
Добавить комментарий