Как работает CSS-специфика?

У меня есть некоторые classы CSS, которые связаны цепями. Может кто-нибудь объяснить, как работает следующий код? Он отображает текст как зеленый. Может кто-нибудь объяснить?

   .a .c { color: red; } .b .c { color: green; } .c { color: blue; }    
hi

Первый говорит, что любой элемент с classом c внутри любого элемента classа a будет окрашен в красный цвет .

 .a .c { color: red; } 

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

 .b .c { color: green; } 

Это говорит о том, что любой элемент с classом c должен быть синим. Но так как это не так описательно, как вышеприведенные правила, это не имеет приоритета . Если у вас есть элемент с classом c который не вложен внутри classа a или b , это правило вступит в силу.

 .c { color: blue; } 

Таким образом, есть два правила:

  • Более конкретные правила получают более высокий приоритет
  • Более поздние определенные правила имеют более высокий приоритет, чем их справедливые как отдельные аналоги.

Все зависит от специфики.

Несколько правил CSS могут быть нацелены на один и тот же элемент, но те, которые имеют более высокую специфичность, будут отменять все остальные.

В вашем сценарии .b .c более конкретна, чем просто .c . Таким образом, первое правило «выигрыша» (которое имеет цвет green набора).

Следующее – хорошее введение в концепцию, о которой я говорю:

http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Это не цепной class, а вопрос о каскадном порядке и наследовании в CSS.

Вы должны знать, что в каскадных таблицах стилей у вас есть некоторый приоритет чтения.

Приказы ваших правил очень важны.

В вашем примере:

 .a .c { color: red } .b .c { color: green } .c { color: blue } 
 
text

Текст отображается как зеленый из-за специфики CSS. Селектор с двумя classами переопределяет селектор только с одним. И причина, по которой она зеленая, а не красная, – это потому, что .b .c .

Вы должны знать, что порядок важен для стилей, например:

 .a .c { /* styles*/} // go first .b .c { /* styles*/} // go next 

стили перегрузки стилей написаны раньше .c внутри .a и .b (взять последний), но не перегружать .c class из-за .c – это обычные стили case;

C ascading S tyle S heets

Последнее объявление всегда будет иметь приоритет, если перед ним есть равные объявления.

Подумайте об этом, как 1 class, равный 1 балл.

.a = 1 балл

.b = 1 балл

.c = 1 балл

.a .c = 2 балла

.b .c = 2 балла

Таким образом, в вашем случае .b .c .a .c & .b .c деклараций они равны в точках и имеют больше, чем просто объявление .c . Итак, следующая вещь, на которую смотрит CSS, – это то, что происходит последним. Так как вы декларация .b .c появляется в таблице стилей, это тот, который браузер будет использовать для стилизации.

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

  • IE - скрытая радиокнопка не проверяется при нажатии соответствующей метки
  • вертикальное и горизонтальное выравнивание (среднее и среднее) с помощью css
  • Объединить: после: hover
  • Ограничить длину текста до n строк с помощью CSS
  • Фоновое изображение в ключевом кадре не отображается в Firefox или Internet Explorer
  • Ориентация только на Firefox с помощью CSS
  • Нажмите DIV на базовые элементы
  • Переполнение текста CSS в ячейке таблицы?
  • Граница CSS hover делает встроенные элементы слегка настраиваемыми
  • jQuery проверяет, имеет ли элемент определенное свойство стиля, определенное в строке
  • CSS-медиа запрашивает минимальную ширину и минимальную ширину устройства?
  • Давайте будем гением компьютера.