CSS не будет применяться к идентификатору только для его дочернего элемента

Question

У меня есть следующий код, я применяю стиль к

<div id="headingGroup">
    <h2>Some Heading</h2>
    <h2>Some Heading</h2>
    <h2>Some Heading</h2>
</div>

Я хотел бы применить вес и размер шрифта ко всем 3 заголовкам, я подумал, что если бы div был присвоен идентификатор, я мог бы вызвать идентификатор в CSS и применить стиль ко всем трем следующим образом

#headingGroup{
    font-weight: 100;
    font-size: 3rem;
}

Однако h2 не меняются, однако, если я вызываю h2 напрямую, шрифт меняется следующим образом

#headingGroup h2{
    font-weight: 100;
    font-size: 3rem;
}

Затем применяется стиль и меняются шрифты, почему нельзя стилизовать на основе идентификатора?

Вот что я вижу, когда проверяю элемент в Chrome

Кажется, тип h2 перекрывает его? Разве идентификатор не является более конкретным и должен переопределять стиль, применяемый к h2 вообще?

Answer 1

В вашем первом фрагменте происходит то, что стили #headingGroup переопределяются базовыми стилями h2 браузера.

Но, как правило, не рекомендуется использовать идентификаторы или даже корневые элементы для CSS. Причина в том, что становится намного сложнее контролировать каскад, переопределять ваши стили позже или повторно использовать ваши стили.

Вместо этого создайте класс, который вы можете напрямую применять к вашим h2 элементам и повторно использовать в других местах, например:

CSS:

.sub-heading {
  font-weight: 100;
  font-size: 3rem;
}

HTML:

<div id="heading-group">
  <h2 class="sub-heading">Some Heading</h2>
</div>

Если вы предпочитаете один класс в контейнере верхнего уровня, вам нужно применить специфичность и стиль h2, так же, как вы это делали во втором примере. Но использование класса все еще предпочтительнее, чем стилизация под ваш ID. Подумайте, как позже вы захотите применить те же стили к другому блоку! Например:

CSS:

.heading-group h2 {
  font-weight: 100;
  font-size: 3rem;
}

HTML:

<div id="heading-group-1" class="heading-group">
  <h2>Heading for group 1</h2>
</div>

<div id="heading-group-2" class="heading-group">
  <h2>Heading for group 2</h2>
</div>

Answer 2

РЕДАКТИРОВАТЬ: Как и предсказывалось в комментариях перед вашим обновлением, ваш браузер добавляет стиль по умолчанию для h2. Точно так же, как если бы у вас это было на вершине вашего кода CSS:

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

---

Давай разберем твою проблему. CSS означает Cascading Style Sheets Таким образом, весь стиль, который вы применяете к селектору (здесь идентификатор), применим ко всем его детям. НО Вы должны знать, что применяемый стиль всегда сильнее. [Подробнее читайте здесь]

Давайте попробуем несколько примеров с обновлением цвета, чтобы улучшить визуальное отображение

1: Надеть стиль на родителя работает хорошо:

#headingGroup {
  color: red;
}

<div id="headingGroup">
  <h2>Some Heading</h2>
  <p>I'm not a title</p>
</div>

2: родительский стиль плетеный, чем текущий стиль объекта

#headingGroup {
  color: red;
}
h2 {
  color: green; /* This will over pass the color red */
}

<div id="headingGroup">
  <h2>Some Heading</h2>
  <p>I'm not a title</p>
</div>

3. Чтобы обойти стиль стиля по умолчанию на h2, вы должны добавить больше силы:

#headingGroup {
  color: red; /* Text inside headingGroup is red by default */
}
h2 {
  color: green; /* This will over pass the color red */
}
#headingGroup h2 {
  color: blue; /* This will overpass all color for h2 inside the group */
}

<p>I'm a text without style</p>
<h2>I'm not on headingGroup</h2>
<div id="headingGroup">
  <h2>Some Heading</h2>
  <p>I'm not a title</p>
</div>

Answer 3

вы используете id_selectorthis идентификатор выбора используется для выбора одного уникального элемента! Чтобы выбрать элемент с определенным идентификатором, напишите хеш (#), а затем идентификатор элемента.

один работает, так как вы указываете, что применить изменения к h2, который является частью div, имеющий id #headingGroup

 #headingGroup h2{
font-weight: 100;
font-size: 3rem;

}

Answer 4

Добавить класс вместо идентификатора. Затем определите CSS для этого класса