Вага стилів

В межах однієї веб-сторнки може бути багато тегів з однаковими класами, та ідентифікатори не повинні повторюватися, вони є унікальними:


				<div class="box" id="box">...</div>

				<div class="box" id="box2">...</div>

				<div class="box" id="box3">...</div>

Селектори в CSS-коді можуть містити назви тегів, класи та ідентифікатори:


				div { ... }

				div.box { ... }

				div#box { ... }

				#box { ... }

				.box { ... }

				#box1.box { ... }

				.box#box2 { ... }

				div.box#box { ... }

Стилі перекривають один одного, який стиль стоїть нижче в коді - той і перекриє попередні стилі (за умови, що у селекторів буде однакова вага).

Елементи селектора мають умовну вагу. Для всього селектора вага вважається сумою всіх його елементів.

Для простоти розрахунку вагу елементів прийнято вважати такою:


				стилі браузера - 0

				* - 0.1

				тег - 1

				клас - 10

				id - 100

				інлайновий стиль (внутритеговий, індивідуальний) - 1000

				!important - 10000

!important - костиль, який можна додавати до стилів для збільшення їх ваги. Це слово зі знаком оклику записується в кінець значення стиля через пробіл:


				.green { color: green !important;}

				.section h2 { color: blue;}


				<div class="section"><h2>Блок 1 ...

				<div class="section"><h2>Блок 2 ...

				<div class="section"><h2 class="green">Блок 3 ...

				<div class="section"><h2>Блок 4 ...

Порахуйте вагу селекторів:


				p { color: red;}

				p * { color: green;}

				p.big span { color: yellow;}

				.news h2#title { color: blue;}

				span.active + span + span { color: aqua;}

				<p class="violet" style="color: violet;">

				p { color: pink !important; font-size: 24px;}

Та 10-кратні різниці - це лище умовність, 11 класів в селекторі не будуть мати більшу вагу за один ідентифікатор. І 20 теж, і 9000, будь-яка кількість класів слабші за один ідентифікатор.