1

I'm having an issue with style inheritance on a project I'm working on at the moment.

The project I'm working on involves me using HTML5, CSS3 other newer standards and features on a codebase that's 12 years old that hasn't been maintained all that well. (For example before I'd even gotten to this issue no HTML5 elements or CSS3 styles could be applied in IE because there wasn't a DOCTYPE)

Anyway, onto the problem at hand! The font styles from the main CSS file for the system I'm working in is overriding the styles of the content I'm working with. It's worth noting I'm using a custom compiled version of Twitter Bootstrap and using that for a lot of the new styles, it's been compiled so that all of the elements in the CSS have .bootstrap-container added as a prefix, then the new content I'm adding is then of course wrapped in a div like so: <div class="bootstrap-container"> ... </div>.

This works for the most part, but the font sizes still mess up on certain elements. Things that are explicitly defined in Bootstrap work fine, like the headers, but say I put a span inside of a header for whatever reason it will use font-size from the main CSS file.

The offending main CSS is:

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

The bootstrap CSS that works currently to override it is:

.bootstrap-container * {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 13px;
}

However this of course poses another problem in that I then have to specify even more override rules to fix other things.

So my question to all of you is how can I override the styles in a better way so that I can pretty much just use Bootstrap as it's meant to be used? If there is a way at all...

4

5 回答 5

3

像这样的东西可能会奏效......

.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;
}
于 2012-09-13T12:00:38.427 回答
3

我试图将覆盖限制为仅表单元素，但必须修改答案以实现它。

/*
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;
}
于 2012-11-30T02:18:06.243 回答
2

If you're able to modify the original CSS, you should be able to make these changes without destroying the original layout but allowing them to coexist with your new styles:

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

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

Setting styles on table/form elements is a throwback from the Netscape 4.x days where they didn't inherit styles properly. You can probably even discard them if you want.

于 2012-09-13T12:17:07.380 回答
0

Compile the whole bootstrap code to make it work only inside a certain element https://stackoverflow.com/a/16495195/356375

于 2013-05-11T08:24:35.363 回答
-1

我通常在我的身体标签上放一个#override id。

然后我可以做类似的事情

#override .bootstrap-container *{

}
于 2016-09-15T12:54:53.980 回答