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

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

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

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

Результат: