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

mbaev 11.08.2014, 11:12

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

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

К примеру:

HTML
  1. <div id="myDiv">
  2.   <div class="divClass">some text</div>
  3. </div>

+

CSS
  1. #myDiv div {
  2.   color: red;
  3. }
  4. .divClass{
  5.   width: 100px;
  6.   border: 1px solid black;
  7.   color: blue;
  8. }

=

some text


Расчет.

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

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

HTML
  1. <div class="divClass myDiv">some text</div>

+

CSS
  1. .myDiv{
  2.   width: 100px;
  3.   border: 1px solid black;
  4.   color: red;
  5. }
  6. .divClass{
  7.   color: blue;
  8. }

=

some text


Источник:

http://htmlbook.ru/samcss/kaskadirovanie