Блог

Я хотел бы понять, как селекторы 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: pink;
}  

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

Как работает приоритет селектора?

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

CSS 2.1 Раздел 6.4.3:

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

• подсчитайте 1, если объявление from является атрибутом ‘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 (в системе счисления с большой базой) придает специфичность.

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

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

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

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

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

Что вас интересует, так это специфичность.

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

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

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

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

   <!-- 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;
}
  

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