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 棕色 和 class 红色 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;
}

Here is the JSFiddle 具有 bootstrap 格式化行。

Answer 2

试试这个

.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;}

Answer 3

这就是你想要的：

.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;
    }

Bootply

如果您想按原样进行：

.blue {
    h1 {/* */}
    h4 {/* */}
}

.red {
    h1{/* */}
    h4{/* */}
}

那么你需要看看 SASS or LESS 哪个能让你做到这一点。

在标准 CSS 中，不能将样式放在同一个 'group' 下。

您必须为每个要设置样式的不同元素换行。

如果我使用纯粹的 CSS 来设计我的风格，我通常会发现它更容易：

.blue {
  /* style here */
}

    .blue p {
        /* .blue p styles */
    }


        .blue p a {
            /* .blue p a styles */
        }

等等。你得到的 'deeper' 缩进得越多。这意味着我可以轻松管理正常 css.

的样式

div css 内的元素组

element groups inside a div css

html

css

formatting

elements

twitter-bootstrap