CSS 规则在没有类的情况下应用，为什么？

Question

我定义CSS规则：

.info-specs h2, h3, h4, h5 {
    font-size: 1.5em;
    text-transform: none;
}

这应该只适用于类为“info-specs”的元素中的 h5。然而，经过检查，我发现其他h5元素也在使用这个规则。为什么？ 下面是一个示例：

<code>.info-specs h2, h3, h4, h5 {
    font-size:5em;
    text-transform: none;
}</code>

<code>&lt;h5&gt;mytest &lt;/h5&gt;</code>

Answer 1

浏览器的 CSS 解释器将查找任何 h3、h4 和 h5 元素，并且仅查找 h2 它将查看它是否在 .info-specs 内。逗号或分组选择器将逗号分隔的所有内容视为单独的选择。

您的问题的可能解决方案是：

/* These select for any h2, h3, h4 and h5 within .info-specs */

.info-specs h2,
.info-specs h3,
.info-specs h4,
.info-specs h5
{
  text-decoration: underline;
}

/* These select for ant h2, h3, h4 and h5 that are direct chldren of .info-specs */
.info-specs > h2,
.info-specs > h3,
.info-specs > h4,
.info-specs > h5
{
  color: red;
}

<div class="info-specs">
  <p>In this example the headings within inf-specs will all be underlined but only the headings that are direct children of info-specs will be coloured red.</p>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <div>
    <h3>Heading 3 in another div</h3>
  </div>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
</div>