Правілы спецыфічнасці ў CSS

У папярэднім прыкладзе абодва селектары былі аднолькавымі і мелі аднолькавы прыярытэт. Гэта значыць, што перамагала ўласцівасць, якая была напісана ніжэй.

Бываюць таксама сітуацыі, калі аднаму элементу старонкі адпавядаюць некалькі селектараў. У гэтым выпадку пры канфлікце ўласцівасцей пераможа больш спецыфічны, гэта значыць больш дакладны селектар. Давайце разгледзім правілы спецыфічнасці.

Правіла першае

Клас заўсёды перамагае селектар тэга:

<p class="text">text</p>

p {
	color: red;
}
.text {
	color: green; /* прымяніцца гэты колер */
}

Правіла другое

Ідэнтыфікатар заўсёды перамагае клас:

<p id="elem" class="text">text</p>

.text {
	color: red;
}
#elem {
	color: green; /* прымяніцца гэты колер */
}

Правіла трэцяе

Пры роўных умовах перамагае той селектар, у якога больш частак. Напрыклад, калі у нас два селектары тэгаў, то пераможа той, у якога тэгаў больш:

<div>
	<p>text</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* прымяніцца гэты колер */
}

Калі два селектары класаў, то пераможа той, у якім указана больш класаў (калі там будуць селектары тэгаў, то яны не ўплываюць):

<div class="block">
	<p class="text">text</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* прымяніцца гэты колер */
}