Пріоритети стилів css

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

Пріоритет від джерела.

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

Ранжируємо стилі по класу.

Властивості, задані конкретно для тега, мають більш низький пріоритет, ніж стильові правила, задані безпосередньо для класу. Наприклад, стильове правило з класом (h3.title_coment або просто .title_coment) має більш високий пріоритет, ніж правило звернене тільки до тегу (h3).

Ранжируємо по специфічності.

Стильові властивості, що володіють більшою вкладеністю, мають пріоритет над властивостями з меншою вкладеністю. Наприклад, стильове правило (.dnzl h1 a) має більш високий пріоритет, ніж правило заданий наступним чином. dnzl a.

Пріоритет від порядку.

Останнє стильове правило (в таблиці стилів, при інших рівних умовах) переважає над усіма попередніми.

Неможливо передбачити, який пріоритет мають атрибути над властивостями заданими в таблиці стилів. Напевно відомо, що стильові правила, в таблиці стилів, що визначають колір фону і переднього плану мають більш високий пріоритет над відповідними атрибутами тегів. Хоча атрибут align в тезі має більш високий пріоритет, ніж визначений у таблиці стилів. Найпростіший вихід уникнути плутанини - використовувати в документі правила, прописані в зовнішніх таблицях стилів. Зрештою, для кращого розуміння сайту завжди слід відокремлювати розмітку від оформлення.

метод визначення пріоритетів

Існує метод визначення пріоритетів. Тобто існують значення (в пунктах), які призначаються кожному стильовому селектору (id. Клас, тег, вбудований стиль).

Схема призначення значень селекторам:

  • вбудований стиль - 1000 пункт
  • Клас - 10 пункт
  • ID - 100 пункт
  • Тег - 1 пункт

Чим більшою є сукупна значення селектора, тим приоритетнее його стильове правило над іншими селекторами.

Для кращого розуміння нижче я навів кілька простих прикладів: