CSS嵌套样式问题：子元素仅遵循自身父类样式，不受上层影响

问题描述 #

使用Bootstrap开发时，嵌套.bg-dark、.bg-light这类背景类元素时，子元素会继承父级背景类的文本样式，导致预设颜色规则失效。比如.bg-dark内部嵌套的.bg-light元素，其内部标题和文本会变成父级的白色，而非自身预设的黑色。需要实现：无论背景类如何嵌套，每个背景类内部的文本、标题等元素都严格遵循自身类的预设颜色，无需为所有嵌套组合编写单独规则。

解决方案 #

核心思路是让背景类直接控制自身容器的文本颜色，同时强制内部所有文本元素继承该颜色，覆盖Bootstrap默认的文本样式优先级。嵌套的背景类会重新设置颜色，其子元素自然继承当前背景类的规则，不受外层影响。

修改后的CSS代码 #

/* 为每个背景类设置基础文本颜色 */
.bg-dark {
  color: white;
}
.bg-light {
  color: black;
}

/* 强制背景类内的文本元素继承父级颜色，覆盖Bootstrap默认样式 */
.bg-dark h1, .bg-dark p,
.bg-light h1, .bg-light p {
  color: inherit;
}

扩展到10种背景选项 #

如果需要支持10种背景类，只需按相同模式扩展：

/* 示例：新增其他背景类的颜色设置 */
.bg-primary { color: #fff; }
.bg-secondary { color: #fff; }
.bg-success { color: #fff; }
.bg-info { color: #000; }
.bg-warning { color: #000; }
/* ... 补充剩余背景类的颜色规则 */

/* 统一重置文本元素继承父级颜色 */
.bg-dark h1, .bg-dark p,
.bg-light h1, .bg-light p,
.bg-primary h1, .bg-primary p,
.bg-secondary h1, .bg-secondary p,
.bg-success h1, .bg-success p,
.bg-info h1, .bg-info p,
.bg-warning h1, .bg-warning p
/* ... 补充剩余背景类对应的文本元素选择器 */ {
  color: inherit;
}

原理说明 #

1. 直接给背景类设置color属性，作为容器内文本的基础颜色。
2. 使用inherit强制标题、段落等文本元素继承父级背景类的颜色，覆盖Bootstrap默认的文本颜色规则（比如h1的默认深色）。
3. 背景类嵌套时，内层背景类会重新定义color，其内部文本元素会继承这个新值，完全不受外层背景类样式影响。

完整代码示例 #

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .bg-dark {
      color: white;
    }
    .bg-light {
      color: black;
    }

    .bg-dark h1, .bg-dark p,
    .bg-light h1, .bg-light p {
      color: inherit;
    }
  </style>
</head>
<body>
<div class="container mt-3">
    <h2>Nesting Div Class Example</h2>
      
        <div class="bg-dark">
            <h1>Outer</h1>
            <p>outer text</p>
            <div class="bg-light">                 
                <h1>Inner</h1>
                <p>Inner text</p>
                <!-- 多层嵌套测试 -->
                <div class="bg-dark">
                    <h1>Deep Inner</h1>
                    <p>Deep inner text</p>
                </div>
            </div>
        </div>
</div>
</body>

内容的提问来源于stack exchange，提问作者Matt Jones