CSS -Пріоритетні правила (вага)

Чи знаєте ви, що CSS визначає певну вагу кожного правила стилю? Це дуже аспект CSS, оскільки він уникне будь-яких невідповідностей між тим, що ви хочете отримати, і тим, що ви отримаєте в реальності.

Приклад:

Спробуйте наступний код HTML:

 div {background-color: blue;} 

У результаті ви отримаєте синій квадрат 100X100 px.

Тепер додайте до нього клас:

 div {background-color: blue;}. MaDiv {колір фону: червоний;} 

Площа стала червоною!

Тепер використовуйте ідентифікатор:

 div {background-color: blue;} .maDiv {колір тла: червоний;} #maDiv {background-color: yellow;} 

Площа тепер жовта, оскільки ідентифікатор сильніший за клас.

Наступне використання тегів, що визначає, це:

 div {background-color: blue;}. MaDiv {background-color: red;} # MaDiv {колір фону: жовтий;} 

Квадрат стає зеленим: хоча в теорії йому присвоюються чотири різних кольору!

Ваги

Ці результати є наслідками ваги (також називається правилами пріоритету):

• Вага тега дорівнює 1
• Вага класу 10.
• Вага ідентифікатора дорівнює 100.
• Вага атрибуту стилю дорівнює 1000.

Це основна маса, є й інші, наприклад, псевдокласи (: hover, : after, : focus ...). Приклад атрибута CSS: при наведенні курсору миші елемент hover додає лише деяку вагу елементу.

Накопичення ваги

Правило стилю може мати проміжну вагу. Дійсно, вага стека.

Приклад:

 div {background-color: blue;} .maDiv {колір тла: червоний;} .maDiv {колір тла: жовтий;} 

Як ви можете бачити, у мене є елемент (вага 1) і два рівні класу (вага 10): останній елемент перебирає і наш квадрат жовтий. Тепер після додавання

 div {background-color: blue;} div.maDiv {колір тла: червоний;} .maDiv {колір тла: жовтий;} 

Квадрат стає червоним. Чому?

• ".maDiv" - 10
• "div.maDiv" поєднує в собі елемент і клас - 11!

Попередження: іноді додавання класу до правила не достатньо для збільшення ваги всіх задіяних елементів.

Зверніть увагу на це

Порівняйте результат цього коду:

 div {background-color: синій;} div # maDiv {background-color: червоний;} 

У результаті цього:

 div {background-color: синій;} div #maDiv {колір тла: червоний;} 

У першому випадку наш div - червоний, у другому - синій!

"Але чому, елемент + ID =, тому він повинен завжди бути червоним!"

Зверніть увагу на тонку різницю:

• div # maDiv : застосовується до div з ідентифікатором "maDiv".
• div #maDiv : Застосовується до всіх елементів, ідентифікатор яких "maDiv" міститься в батьківському елементі під назвою "div".

Наша площа стосується лише першого правила. Як правило, завжди звертайте увагу на те, як ви пишете свої правила, правильно використовуйте пробіли, кому ... і т.д.

Приклади:

• p .myClass a {} : для всіх посилань, що містяться в будь-якому елементі, клас якого є "myClass", все це міститься в будь-якому

  елемент. Вага: 12.

• p.myClass, a {} : для всіх посилань і всіх

  чий клас - "myClass". Вага: 11 або 1

• p, .myClass, a {} : для всіх посилань і всіх елементів, клас яких є "myClass" і всі інші

  елемент. Вага: від 1 до 10 або 1