CSS : Issue with parent class

Question

我有一个关于 CSS 父类的问题。

我需要在我的主页上修改一些组件，如 panel-body、panel-footer 等......只在我的主页上。

所以我想定义一个这样的父类:

<div class="row parent-class">
    <div class="col-xs-12 col-sm-12 col-md-9 visu-pharma">
        <a href="#">
            <img src="../img/Visuel-Pharmacopée.jpg" alt="VisuPharma"/>
        </a>
    </div>
    <br />
    <br>
    <div class="col-xs-12 col-sm-12 col-md-3">
        <div class="panel panel-default">
            <div class="panel-body ">
                <p class="p-text">NOW AVAILABLE</p>
            </div>
        </div>
    </div>
</div>

如您所见，我在第一行有一个名为.parent-class 的父类。

在我的 CSS 文件中，我想设置如下内容:

.parent-class {
    .panel-body {
        background-color: #f5f5f5;
    }
}

这是行不通的。这个例子很简单，因为你可以让我来做:

.parent-class.panel-body{}

但我可能有 20 个不同的类，具体取决于 parent-class，我想制作通用 CSS。

我的 CSS 概念中有什么地方是错误的？

Answer 1

CSS 不支持嵌套选择器。您正在尝试做的是纯 SCSS 或 Less 功能。但是对于每个子类中相同的样式，您可以执行以下操作:

.parent-class [class^="panel-"] {
  background-color: #f5f5f5;
}

但不确定这是否有帮助，因为对于每种不同的样式，您仍然需要您的父类。或者你可以只使用 scss :)