CSS:样式影响预期选择器之外的标签

Question

如果标题有点困惑，我们深表歉意。这就是我的意思:

我有以下标记:

<ul class="cv-section">
    <li>
        <h2>Section</h2>
        <p>Lorem ipsum dolor sit amet...</p>
    </li>
    ...

我有以下风格:

.cv-section h1,h2,h3,h4,h5 {
    text-align: left;
    color: red; /*for debugging*/
}

但是，该样式正在对以下 h2 标签生效:

<div class="content-wrapper">
    <article>
        <h1>About Title</h1>
        <p class="lede">Lorem ipsum dolor sit amet.</p>
        <h2>About Title h2</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </article>
</div>

CSS 选择器指定标题是 .cv-section 的后代，但文章中的 h2 标记为红色并向左对齐，尽管页面上没有出现任何 .cv-section。

我做错了什么？

(已在 Chrome 和 Firefox 中测试。)

Answer 1

您需要在规则中为每个元素重复.cv-section:

.cv-section h1, .cv-section h2, .cv-section h3, .cv-section h4, .cv-section h5

您现在的方式，只有 .cv-section h1 被限制为存在于具有 .cv-section 类的元素中

>