Понимание CSS селектора приоритет / специфичность - PullRequest
Новая
       21

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

33 голосов
/ 01 ноября 2010

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

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

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

Ответы [ 4 ]

49 голосов
/ 01 ноября 2010

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

CSS 2.1 Раздел 6.4.3 :

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

  • count 1, если декларация from является атрибутом 'style', а не правилом со селектором, 0 иначе (= a) (В HTML значения атрибута "style" элемента являются правилами таблицы стилей. Эти правила имеют селекторов нет, поэтому a = 1, b = 0, c = 0 и d = 0.)
  • подсчитать количество атрибутов ID в селекторе (= 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.

5 голосов
/ 01 ноября 2010

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

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

3 голосов
/ 19 февраля 2017

С полным ответом можно ознакомиться здесь Документация 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;
}

Вот контрольный пример.

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...