Question

我在目前正在处理的项目中遇到样式继承问题。

我正在进行的项目涉及到我使用HTML5，CSS3其他更新的标准和功能，这些标准和功能在12年前的代码库上并没有得到很好的维护。 （例如在我发现这个问题之前，没有HTML5元素或CSS3样式可以在IE中应用，因为它没有DOCTYPE）

无论如何，关于手头的问题！我正在使用的系统的主要CSS文件中的字体样式覆盖了我正在使用的内容的样式。值得注意的是，我使用Twitter Bootstrap的自定义编译版本并将其用于许多新样式，它已被编译，以便CSS中的所有元素都具有{{{ 1}}作为前缀添加，然后我添加的新内容当然会包含在div中，如下所示：.bootstrap-container。

这在很大程度上起作用，但字体大小仍然在某些元素上搞乱。在Bootstrap中明确定义的东西工作得很好，比如标题，但是我说在一个标题内放置一个span，无论出于何种原因它将使用主CSS文件中的<div class="bootstrap-container"> ... </div>。

令人讨厌的主要CSS是：

font-size

当前用于覆盖它的bootstrap CSS是：

body, td, tr, div, p, form, input, select, textarea, font {
    color: #333;
    font: 10px verdana, helvetica, sans-serif;
}

然而，这当然会带来另一个问题，因为我必须指定更多覆盖规则来修复其他事情。

所以我向大家提出的问题是如何以更好的方式覆盖样式，以便我可以使用Bootstrap，因为它意味着要使用？如果有办法......

Answer 1

像这样的东西可以做到这一点......

.bootstrap-container *,    
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font {
    color: #333;
    font: 10px verdana, helvetica, sans-serif;
}

Answer 2

我试图将过度限制仅限于表单元素，但必须修改答案才能实现它。

/*
Bootstrap over rides
*/
.container form, 
.container input, 
.container button,
.container select, 
.container textarea {
    font-size: 12px;
    padding: 1px 2px 1px 2px;
}


.container select {
    height: 24px;
}

Answer 3

如果您能够修改原始CSS，您应该能够在不破坏原始布局的情况下进行这些更改，但允许它们与您的新样式共存：

body {
    color: #333;
    font: 10px verdana, helvetica, sans-serif;
}

td, tr, div, p, form, input, select, textarea, font {
    color: inherit;
    font: inherit;
}

在表格/表单元素上设置样式是Netscape 4.x天的回归，它们没有正确地继承样式。如果你愿意，你甚至可以丢弃它们。

Answer 4

编译整个引导程序代码，使其仅在某个元素https://stackoverflow.com/a/16495195/356375

内部工作

Answer 5

我通常在我的身体标签上加上#override的ID。

然后我可以做类似

的事情

#override .bootstrap-container *{

}

CSS继承：用容器覆盖父CSS？

5 个答案: