Пріоритет в css, уроки, webreference

Елемент HTML може бути метою кількох правил CSS. Давайте скористаємося простим абзацом як приклад:

Ми можемо змінити цей абзац просто використовуючи ім'я тега:

Або ж можемо скористатися ім'ям класу:

Або можемо використовувати ідентифікатор:

Оскільки браузер може вибрати тільки один колір і застосувати його до цього абзацу, то він повинен вирішити, яке правило CSS має пріоритет над іншими. Це називається пріоритетом в CSS (або специфічністю).

У нашому прикладі абзац буде червоним. тому що ідентифікатор більш специфічний і, таким чином, більш важливий. ніж інші селектори.

Порядок правил CSS

Якщо у вашому CSS є однакові селектори, то останній з них буде мати пріоритет.

обчислення 100

Є один швидкий спосіб з'ясувати, наскільки правило CSS «сильне», шляхом обчислення специфічності селекторів:

Селектор з найвищим «рахунком» буде переважати, незалежно від порядку, в якому з'являються правила CSS.

правило #introduction є більш специфічним. ніж інші, тому що ідентифікатори повинні бути унікальними по всій веб-сторінці, таким чином, може бути тільки один цільової елемент.

message буде націлений на будь-який HTML-елемент з атрибутом class = "message" і, отже, менш специфічний. Те ж саме відноситься і до p . який може призначатися для будь-якого абзацу.

Як уникнути конфліктів

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

Щоб уникнути цього:

  • застосовуйте тільки класи. використовуйте .introduction замість #introduction. навіть якщо цей елемент з'являється на вашій веб-сторінці тільки один раз;
  • уникайте застосовувати кілька класів до одного елементу HTML: пишіть НЕ

    . а

    . який є семантично більш описовим;

  • не використовуйте вбудовані стилі. такі як
    .

Схожі статті