Елемент HTML може бути метою кількох правил CSS. Давайте скористаємося простим абзацом як приклад:
Ми можемо змінити цей абзац просто використовуючи ім'я тега:
Або ж можемо скористатися ім'ям класу:
Або можемо використовувати ідентифікатор:
Оскільки браузер може вибрати тільки один колір і застосувати його до цього абзацу, то він повинен вирішити, яке правило CSS має пріоритет над іншими. Це називається пріоритетом в CSS (або специфічністю).
У нашому прикладі абзац буде червоним. тому що ідентифікатор більш специфічний і, таким чином, більш важливий. ніж інші селектори.
Порядок правил CSS
Якщо у вашому CSS є однакові селектори, то останній з них буде мати пріоритет.
обчислення 100
Є один швидкий спосіб з'ясувати, наскільки правило CSS «сильне», шляхом обчислення специфічності селекторів:
Селектор з найвищим «рахунком» буде переважати, незалежно від порядку, в якому з'являються правила CSS.
правило #introduction
message
Як уникнути конфліктів
Під час написання вашого CSS можуть легко виникнути суперечливі правила. в яких один і той же властивість застосовується кілька разів.
Щоб уникнути цього:
- застосовуйте тільки класи. використовуйте .introduction замість #introduction. навіть якщо цей елемент з'являється на вашій веб-сторінці тільки один раз;
- уникайте застосовувати кілька класів до одного елементу HTML: пишіть НЕ
. а
. який є семантично більш описовим;
- не використовуйте вбудовані стилі. такі як .
Схожі статті