如何在 div 中为 CSS 选择多个元素

Question

这似乎是一个非常简单的问题，谷歌可以回答，但我一直在努力解决这个问题。假设你有一个这样的 HTML 代码：

    <p> text 1 </p>
    <div class = "divone">
        <p> text 2 </p>
        <h1> text 3 </h1>
    </div>

如果我有这样的 CSS 设置：

    .divone h1, p{
        color: yellow;
    }

它似乎改变了 div 元素之外的 p 元素。我该怎么做才能选择 div 内的元素，以便它只更改 div “divone”内的 p？

Answer 1

,分隔规则，因此您必须重复.divone：

.divone h1,
.divone p {
    color: yellow;
}

您可以使用一些 CSS 预处理器（如 LESS 或 SASS）来嵌套规则：

.divone {
    h1,
    p {
        color: yellow;
    }
}

但它会编译为相同的 CSS 规则。

您当前的规则.divone h1, p说适用于页面h1内部.divone或任何p元素