Помогите разобраться с приоритетами в CSS

Question

Что важнее из правил и селекторов в убывающем порядке (инфа в сети есть но кусками и хочу сложить картину полностью)?

есть инлайн стили, импортант, айди, классы, тэги(div, a...), др. атрибуты, дата атрибуты и прочее. Если кто разбираеться напишите пожалуйста встолбик от самых вахных и вниз

Спасибо

Answer 1

Подсчет специфичности считается следующим образом:
мы считаем количество селекторов и добавляем их число в нехитрую формулу, которая выглядит как-то так: a=0, b=0, c=0, d=0, где 0 число каждого селектора, которое мы будем увеличивать.

!important важнее всего, его стоит использовать в крайних случаях,
инлайн стили (<p style="color: red;">) не являются селекторами, но условно увеличивают a на 1,
каждый селектор идентификатора (#block1) увеличивает b на 1,
каждый селектор класса (.block) или атрибутов (*[id="some-id"]) увеличивает c на 1,
каждый HTML селектор (body, p, etc.) и псевдо-элемент увеличивает d на 1,
универсальный селектор *, комбинаторы +, >, ~, ' ' и отрицающий псевдокласс :not() не влияют на специфичность.

Стили применяются по подсчету и сравнению чисел a-b-c-d (если a больше b, то будет использован а и т.д)

Более подробно о специфичносте.

Примеры

p {
  color: red;
}

.main {
  color: blue;
}

<div class="main">
  <p>Красный, т.к. стиль color: red применён непосредствтенно к елементу, а не наследован от родителя.</p>
</div>

.main .p {
  color: red;
}

div .p {
  color: blue;
}


/* ------------------- */

.main p#f {
  color: purple;
}

.main #f {
  color: red;
}

<div class="main">
  <p id="f">Фиолетовый, т.к. .main p#f <b>a=0,b=1,c=1,d=1</b>, а .main #f будет <b>a=0,b=1,c=1,d=0</b></p>
  <p class="p">Красный, потому что .main .p <b>a=0,b=0,c=2,d=0</b>, а div .p будет <b>a=0,b=0,c=1,d=1</b></p>
</div>

body p {
  color: red;
}

p {
  color: blue;
}

<p>Красный, т.к. мы используем вложенный селектор body p <b>a=0,b=0,c=0,d=2</b>, а p будет <b>a=0,b=0,c=0,d=1</b></p>

p {
  color: blue !important; /* даже приоритетнее за style */
}

#f {
  color: blue;
}

<style>
  p {
    color: red;
  }
</style>

<p>Синий, из-за !important</p>
<h1 id="f" style="color: purple">Фиолетовый т.к. a=1,b=0,c=0,d=0</h1>

#p {
  color: blue;
}

.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11 p {
  color: red;
}

<div class="a1">
  <div class="a2">
    <div class="a3">
      <div class="a4">
        <div class="a5">
          <div class="a6">
            <div class="a7">
              <div class="a8">
                <div class="a9">
                  <div class="a10">
                    <div class="a11">
                      <p id="p">Но, как видим, цвет не красный, потому что при 11 классах у нас <b>a=0,b=0,c=11,d=1</b>, а при одному селектору идентификатора <b>a=0,b=1,c=0,d=0</b></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Помогите разобраться с приоритетами в CSS

Ответы (1 шт):

Примеры