具有特定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>

我想我只是＆＃34;模糊＆＃34;关于特定CSS结构的原因是什么。

Answer 1

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'，但每个元素的实现方式都不同，所以如果<p>有类'red' 1}}，按照这种方式设置样式，如果<h2>具有类'red'那么样式。

Answer 2

有些人可能使用该构造的原因很多。想到的是：

• 区分class-name类h2类的成员及其成员的成员。
• 要控制specificity，因为h2.class-name比.class-name更具体。
• 为了让人们清楚地了解该类应该应用于哪些元素

  

除非原因是您无法编辑HTML。所以这就是它，对吧？：

没有。这需要使用儿童或后代组合器。

.class-name h2 {}