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

您需要在规则中为每个元素重复for (i in 1: 30) { tab=day"i" #my code }：

.cv-section

现在的方式，只有.cv-section h1, .cv-section h2, .cv-section h3, .cv-section h4, .cv-section h5仅限于现有的.cv-section h1

类元素

Answer 2

应该是这样的。 .cv-section h1将影响div cv-section中的所有h1，但是当你用逗号分隔它时，你正在定义一个新规则。

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

CSS：样式会影响预期选择器之外的标记

2 个答案: