Наследование классов с определенным именованием CSS

Question

Не могу вспомнить , почему используется эта структура в CSS ?:

h2.class-name

Кажется, что вы могли бы просто написать .class-name ипросто укажите, что класс для h2:

<h2 class="class-name">Title thing</h2>

Если только причина этого в том, что вы не можете редактировать HTML.Так что это будет, верно?:

<div class="class-name">
  <h2>Title thing</h2>
</div>

Полагаю, я просто "нечетка" по поводу того, что будет за аргументация для этой конкретной структуры CSS.

Answer 1

Существует множество причин, по которым может использовать эту конструкцию.На ум приходят следующие элементы:

• Чтобы различать членов класса class-name, которые являются h2 элементами, и его членов, являющихся некоторыми другими элементами.
• Для управления специфичностью , поскольку h2.class-name более специфичен, чем .class-name.
• Чтобы было понятно людям, читающим CSS, какие элементы этого класса предполагается применить к

---

Если причина этого не в том, что вы не можете редактировать HTML.Так что это будет, верно?:

Нет.Это потребовало бы использования комбинаторов дочерних или дочерних элементов.

.class-name h2 {}

Answer 2

h2.class-name означает, выберите все элементы <h2>, которые имеют класс 'class-name', учитывайте следующее:

p.red {
  background-color: red;
  color: white;
}

h2.red {
  color: red;
  text-decoration: underline;
}

<p class="red">
  RED PARAGRAPH
</p>

<h2 class="red">RED HEADING 2</h2>

Обратите внимание, что и <p>, и <h2> имеют класс 'red', но его реализация различна для каждого элемента, поэтому если *У 1015 * есть класс 'red', стилизуйте его таким образом, а если у <h2> есть класс 'red', стилизуйте его таким образом.