How to neutralize CSS definitions without overriding

问题

Is there a way to neutralize CSS rules for an element without overriding everything?

For examble, I'm using Twitter Bootstrap and it has many pre-defined CSS definitions for table. In some places, I don't want them.

On certain table elements, I'm wondering if I can do something like this:

<table style="default"></table>

回答1:

You can not neutralize CSS rules whithout overriding. So you have to do as you suggested in the answers above.

回答2:

Bootstrap has only a little bit of CSS for the <table> element:

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

To override these you could make a class for your table called strapless or something:

table.strapless{
  max-width: 100%;
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

This table.strapless selector will override the table selector used by bootstrap because it is more specific.

To use the css class include it in the class attribute of your table:

<table class="strapless">

回答3:

Use a class in your CSS to target different table elements.

table.black {
    background-color:black;
}

table.default {
    background-color:white;
}

You can then group your table elements and apply the specific styles that you intend to apply just simply by giving them the appropriate class attribute names on the elements themselves.

<table class="default">

<table class="black">

It's also important to note that CSS class definitions will override element definitions. A good rule of thumb is that more specific CSS selectors will override less specific selectors. Thus, you can apply different CSS styles from a new CSS file, if for some reason you don't want to modify your original CSS file. This of course assumes there isn't already a table.default rule and a table.black rule in the legacy CSS.

回答4:

Your website's CSS should probably be in an external stylesheet if there is going to be a decent amount of it. In this stylesheet, you would do what others suggest which is to give your table a class name where you could add the CSS rules you want.

But then the real key in order to override Bootstrap's stylesheet with your newly applied CSS rule(s) in your, mysite.css, stylesheet is for this stylesheet to be placed further down on your HTML page than that of the bootstrap.css file. Like this:

External:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/assets/css/mysite.css" rel="stylesheet" type="text/css">
</head>
</html>

If you don't want to go the external stylesheet route, then using "inline" rules as you suggested in your question will work (i.e., override bootstrap.css) too:

Inline:

<!DOCTYPE html>
<html lang="en">
<head>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
  <table>
      <tr>
         <td style="border-top: 1px solid red;"></td>
         <td></td>
     </tr> 
  </table>
</body>
</html>

来源：https://stackoverflow.com/questions/10474303/how-to-neutralize-css-definitions-without-overriding

标签

css

twitter-bootstrap

stylesheet