html - div css 中的元素组

Question

假设我想使用 bootstraps 网格布局创建网页。我创建了具有不同背景颜色和一些文本的框。例如，有没有办法像这样定义 css 属性？

HTML

<div class="blue">
<h1>Hello</h1>
<p>Some text</p>
</div>

<div class="red">
<h1>Hello again</h1>
<p>Some more text</p>
</div>

CSS

.blue {background-color: blue;color:black;
       .h1 {color:red;}
       .h4 {color:brown;}
}

.red {background-color: red;color:black;
        .h1 {color:blue;}
        .h4 {color:green;}
}

所以当我用 blue class 创建 div 时，我有 h1 red 和 h4 brown 以及 class red h1 是蓝色 而h4 是绿色 不需要格式化其他任何东西？

Answer 1

试试这个

.blue {background-color: blue;color:black;}
      .blue h1 {color:red;}
       .blue h4 {color:brown;}


.red {background-color: red;color:black;}
        .red h1 {color:blue;}
        .red h4 {color:green;}