Понимание CSS селектора приоритет/специфичность

Я хотел бы понять, как селектора CSS работают со свойствами коллизий, как свойство выбрано вместо другого?

 div {
      background-color:red;
 }
 div.my_class {
      background-color:black;
 }
 div#my_id {
      background-color:blue;
 }
 body div {
      background-color:green;
 }
 body > div {
      background-color:orange;
 }
 body > div#my_id {
      background-color:white;
 }

 <html>
      <body>
           <div id="my_id" class="my_class">hello</div>
      </body>
 </html>

Для кого-то это может быть очевидно, но не для меня!

Есть ли какое-нибудь руководство или ссылка, где я могу наконец понять, как работает приоритет выбора?

Ответы

Ответ 1

Я просто брошу ссылку на саму спецификацию CSS 2.1 и как браузеры должны вычислять специфичность:

CSS 2.1 Раздел 6.4.3:

Специфичность селектора рассчитывается следующим образом:

  • count 1, если объявление является атрибутом 'style', а не правилом с селектором, 0 в противном случае (= a) (В HTML значения атрибута стиля "style" являются правилами таблицы стилей. нет селекторов, поэтому a = 1, b = 0, c = 0 и d = 0.)
  • подсчитать количество атрибутов идентификатора в селекторе (= b)
  • подсчитать количество других атрибутов и псевдоклассов в селекторе (= c)
  • подсчитать количество имен элементов и псевдоэлементов в селекторе (= d)
  • Специфика основана только на форме селектора. В частности, селектор формы "[id = p33]" засчитывается как селектор атрибутов (a = 0, b = 0, c = 1, d = 0), даже если атрибут id определен как "ID" в исходном документе DTD.

Объединение четырех чисел a-b-c-d (в числовой системе с большой базой) дает специфичность.

Если значения одинаковы, то вступает в игру CSS 2.1 Раздел 6.4.1:

  1. Наконец, выполните сортировку по указанному порядку: если два объявления имеют одинаковый вес, происхождение и специфичность, последний указывает выигрыши. Объявления в импортированных таблицах стилей считаются перед любыми объявлениями в самой таблице стилей.

Обратите внимание, что это говорит о том, когда стиль определен, а не когда он используется. Если классы .a и .b имеют одинаковую специфичность, в зависимости от того, что определено последним в победах стилей (ов). <p class="a b">...</p> и <p class="b a">...</p> будут обозначаться одинаково на основе порядка определения .a и .b.

Ответ 2

Что вас интересует, это specificity.

Firebug - отличный инструмент для проверки этого. Но в других браузерах также встроены инструменты для проверки применяемых правил CSS.

Ответ 3

  1. Элемент
  2. Селекторы классов
  3. Селекторы ID
  4. Встроенные стили
  5. !важный

По порядку 1 - самая низкая специфичность, а 5 - самая высокая. https://youtu.be/NqDb9GfMXuo покажет детали для демонстрации.

Ответ 4

Вы можете направить полный ответ здесь Документация Mozilla

Начните с самых конкретных: id selectors > селектора классов > селектор типов (обычный h1, p и т.д.) Важно всегда выигрывает, но считается плохой практикой. См. ссылку выше.

Лучший способ - поэкспериментировать с ним:          

  <!-- start class vs id -->
  <p class="class1" id="id1">.class vs #id: The winner is #id</p>

  <!-- upper vs bottom -->
  <p id="id2">the very bottom is the winner</p>

  <!--most specific is the winner -->
  <p id="id3">the most specific</p>

  <!--pseudo and target selector -->
  <h3>pseudo vs type selector</h3>

  <!-- !important is more important! -->
  <h1 id="very-specific">HI! I am very important!</h1>
  </body>

CSS

#id1{
    color: blue;
}

.class1{
    color: red;
}

#id2{
    color: yellow;
}

#id2{
    color : green;
}

body p#id3{
    color :orange;
}

body p{
    color : purple;
}

body{
    color : black;
}

h3::first-letter {
    color: #ff0000;

}

h3{
    color: CornflowerBlue ; 
}

h1{
    color: gray !important;
}

body h1#very-specific{
    color: red;
}

Вот тестовый пример.