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

【问题标题】：How to Select Multiple Elements inside a div for CSS如何在 div 中为 CSS 选择多个元素
【发布时间】：2019-11-12 21:11:49
【问题描述】：

这似乎是一个可以由 Google 回答的非常简单的问题，但我一直在努力解决这个问题。假设您有这样的 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？

【问题讨论】：

下面的答案都没有说明这一点，但您也可以使用通用选择器来选择元素的所有子元素 - .divone * {} 或 .divone > * {} 如果您只想要直接子元素。使用它时要小心，因为它可能是一个昂贵的选择器 (although not too much in modern browsers) - 这就是为什么我没有把它作为答案。 More information about the universal selector
@Pete 但它与.divone h1, .divone p 不同，你会遇到很多问题。根据我的经验，最好不要使用它。
@Justinas 你能扩展“很多问题”吗？我从来没有遇到过使用它的问题
@Pete .divone里面有modal，那么你需要覆盖背景颜色不同，但是碰巧#container .divone的优先级高于.modal，所以你开始使用!important...等等.. .
@Justinas 我从来不需要将important 与通用选择器一起使用——那一定是你不了解如何正确使用css——这完全是关于特异性，并且将以完全相同的方式工作作为 divone p 和 divone h1。还有其他问题吗？

标签： html css

【解决方案1】：

p 元素的父元素未指定，因此您应该执行以下操作之一：

.divone h1
.divone p {
 color: yellow
 }

或者你可以使用 ">" 符号，它会影响元素的直接子元素

.divone > h1
.divone > p {
 color: yellow
 }

【讨论】：

【解决方案2】：

选择指定元素的直接子元素。并避免更深的嵌套，使用立即选择器">"

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

否则选择父元素的所有子元素使用

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

【讨论】：

【解决方案3】：

,分隔规则，所以必须重复.divone：

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

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

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

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

您当前的规则.divone h1, p 表示申请h1 位于.divone 或页面上的任何p 元素中

【讨论】：

真的吗？我发誓有一种更直观的方法可以在 div 中选择多个元素，呵呵。
@Dragonsnap 可以使用像 SASS/SCSS 这样的 CSS 预处理器，但不能使用标准 CSS
@Dragonsnap - 我们越来越接近了。对 .divone :is(h1, p) 的支持在实验标志或实验供应商前缀或以前的名称 in most browsers 后面可用

【解决方案4】：

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

【讨论】：