Вопрос о запутанном правиле специфичности CSS (из книги SAMS Teach Yourself CSS за 24 часа, второе издание)

Question

Это правило 2 из 5 правил, которые книга дает о том, как браузер определяет, какое правило применять в конфликте:

Селектор идентификатора является вторым наиболее специфичным [после встроенного атрибута стиля]. Если в правиле более одного идентификатора, правило с наибольшим числом селекторов идентификаторов выигрывает.

Я действительно не понимаю, о чем говорит Правило 2 - оно говорит: «если в правиле больше одного идентификатора» (который является единственным) Если существует только одно правило, как возникает конфликт или сравнение («правило с наибольшим ... выигрывает»)? Как одно правило может иметь различное количество селекторов идентификаторов и где конфликт, если существует только одно правило?

Может кто-нибудь, пожалуйста, подробно изложите это правило? Спасибо за помощь, поскольку я пытаюсь понять основы веб-дизайна

Answer 1

Селектор может иметь любое количество селекторов идентификаторов.

Например, #id1 #id2 выбирает элемент с идентификатором id2, если он является потомком элемента с идентификатором id1.Он имеет два селектора идентификаторов, поэтому он будет более конкретным, чем, скажем, #id2, который просто выбирает любой элемент, если только он с идентификатором id2, без каких-либо других условий.

Таким образом, между этими двумя правилами (при условии отсутствия встроенных стилей):

#id1 #id2 { color: red; }
#id2 { color: blue; }

Первое правило имеет приоритет, и текст в этом элементе имеет красный цвет, а не синий, потому что первое правило имеет больше селекторов идентификаторов.

Answer 2

Вот пример, селектор с большим идентификатором будет иметь приоритет:

<div id="parent">
   <div id="child">
      Some text here
   </div>
</div>

теперь, когда я применяю CSS

#parent #child {
   background-color: red;
}

#parent div {
    background-color: yellow;
}

селектор #parent #child будет иметь приоритет. потому что это более конкретно, чем второй. в этом случае у div будет красный фон.