В CSS может ли "#footer #caption" сосуществовать с "#content #caption"?

Question

Я собирался «вложить» CSS id s вот так

#content #caption { color: teal }
  ...

#footer #caption { margin: 2em 1em }

, потому что именно так SASS (генератор CSS) может выполнять вложение для ... но затем в одном HTML-документе.у нас не может быть двух id с одним и тем же именем, не правда ли, поэтому приведенное выше размещение не будет работать или не будет работать хорошо.(особенно если для выбора элемента требуется document.getElementById () или $ ('# caption') или $ ('caption')). ​​

Мы можем использовать

#content #content_caption { color: teal }
  ...

#footer #footer_caption { margin: 2em 1em }

, нотогда зачем еще 1 уровень вложенности?почему не просто

#content_caption { color: teal }
  ...

#footer_caption { margin: 2em 1em }

?

Answer 1

Слово «заголовок» будет означать, что это не уникальный идентификатор. Если это так, я бы объявил заголовок как класс. Следующее будет полностью законным и действительным:

#content .caption { color: teal }
#footer .caption { margin: 2em 1em }

Answer 2

Во-первых, нечто вроде «заголовка» действительно звучит больше как класс:

Вы говорите: это ** ** нижний колонтитул (конкретный идентификатор), но это ** a ** заголовок (общий класс).

Вот еще один способ размещения селекторов в Sass:

.caption
  margin: 2em 1em
  font-weight: bold
  #footer &
    background: teal
  #content &
    background: red

(«&» ссылается на что угодносодержится в.)

Answer 3

Если на одной странице нет двух элементов с id = "caption", это нормально. Тем не менее, по названию (контент и нижний колонтитул) я догадываюсь, что существует более одного с id = "caption", что очень плохо. Вы должны помнить, что id должен быть уникальным! Вместо этого использовать "класс", например

#content .caption { }
#footer .caption { }

Answer 4

нет причин для этого.id - действительно тяжелый селектор, его должно быть достаточно, чтобы изменить правила стиля.если нет, добавьте #content ранее или измените селекторы выигрышных правил.