CSS类嵌套不起作用[重复]答案

【问题标题】：CSS class nesting not working [duplicate]CSS类嵌套不起作用[重复]
【发布时间】：2023-03-31 10:08:01
【问题描述】：

我有一个 CSS 类，我想确保在为该类分配 h2 标记时，将额外的 CSS 赋予原始类顶部的 h2 标记。这是我目前拥有的 CSS 和 HTML，但它目前没有渲染出 text-align 类。

.aligncenter {
	clear: both;
	color: #000000
	h2{
		text-align: center;
	}

<div>
<h2 class="aligncenter"> H2 Text that should be black and centered</h2>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

你不能用普通的 css 做到这一点。使用常规 css 实现您想要的唯一方法是这样的：

.aligncenter {
    clear: both;
    color: #000000
}

h2.aligncenter {
    clear: both;
    color: #000000
    text-align: center;
}

要进行嵌套和其他很酷的事情，您需要一些 CSS 扩展语言，例如 SASS

【讨论】：

我正在使用 SCSS，并且在代码库中看到过类似的内容，但我自己无法使其工作
您是否正在将您的 scss 文件转换为 css？
是的，我是 - 使用 sass 编译器。我想这就是它开始崩溃的地方

【解决方案2】：

.aligncenter {
	clear: both;
	color: #000000
	h2{
		text-align: center;
	}

<div>
<h2 class="aligncenter"> H2 Text that should be black and centered</h2>
</div>

【讨论】：

【解决方案3】：

<style>
h2.aligncenter {
        clear: both;
        color: #000000;
        text-align: center;
        }
</style>

    <div><h2 class="aligncenter"> H2 Text that should be black and centered</h2></div>
 <!-- end snippet -->

【讨论】：