Блог

Я хотел бы понять, как селекторы 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, если объявление от является атрибутом «стиль», а не правилом с селектором, 0 в противном случае (= a) (В HTML значения атрибута «стиль» элемента являются правилами таблицы стилей. В этих правилах нет селекторов, поэтому a=1, b=0, c=0 и d=0.)
• подсчитайте количество атрибутов идентификатора в селекторе (= b)
• подсчитайте количество других атрибутов и псевдоклассов в селекторе (= c)
• подсчитайте количество имен элементов и псевдоэлементов в селекторе (= d)
• Специфика основана только на форме селектора. В частности, селектор формы «[id=p33]» считается селектором атрибутов (a=0, b=0, c=1, d=0), даже если атрибут id определен как «идентификатор» в DTD исходного документа.

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

Если характеристики равны, то в игру вступает раздел 6.4.1 CSS 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 и т. Д.). !важное всегда побеждает, но это считается плохой практикой.Смотрите ссылку выше.

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

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

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