Специфичность (приоритеты) в css

Таблица специфичности (приоритетов) стилей, как их рассчитывают браузеры. Иногда нужно знать для того, чтобы понимать стоит ли в данной ситуации пытаться переопределить стили навешанные на id стилями навешанными на класс.

Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.

*              {} /* a=0 b=0 c=0 -> специфичность = 0   */
li             {} /* a=0 b=0 c=1 -> специфичность = 1   */
li:first-line  {} /* a=0 b=0 c=2 -> специфичность = 2   */
ul li          {} /* a=0 b=0 c=2 -> специфичность = 2   */
ul ol+li       {} /* a=0 b=0 c=3 -> специфичность = 3   */
ul li.red      {} /* a=0 b=1 c=2 -> специфичность = 12  */
li.red.level   {} /* a=0 b=2 c=1 -> специфичность = 21  */
#t34           {} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */

К примеру:

<div id="myDiv">
  <div class="divClass">some text</div>
</div>

#myDiv div {
  color: red;
}
.divClass{
  width: 100px;
  border: 1px solid black;
  color: blue;
}

some text

Расчет

Идентификатор #myDiv = 100, тег div = 1. Вместе 101. Класс .divClass = 10. Соответственно, 101 > 10. Поэтому стили для класса применены не будут.

Еще момент. Стили, с одинаковым приоритетом (специфичностью) будут вычисляться по правилу Кто последний тот и прав, но последний не в списке классов в теге HTML, а последний в списке стилей. Пример:

<div class="divClass myDiv">some text</div>

.myDiv{
  width: 100px;
  border: 1px solid black;
  color: red;
}
.divClass{
  color: blue;
}

some text

Источник:

http://htmlbook.ru/samcss/kaskadirovanie

Расчет

Источник:

Другие посты