Is there any way to disregard the styles written in parent tags?

Is there any way to disregard whatever styles written, and start from scratch for a new tag. For example, if I have written a style

table {
  large amount of styles..
}

and then I want to start a new table with no styles whatsoever with something like this

<table style="no style"&g开发者_运维问答t;

I can write a different class for new table and apply the class, but the problem is that there are so many styles to override. Is there such an attribute?

Unfortunately no, there is no way to "reset" an element. This is one reason it is recommended to not give elements over-arching styles. It can become an issue later when you want to change it. You have two options.

1. create a class instead, and give all the existing tables that class.
2. Simply override the changes in a new class for your new tables.

Nope. You’d be better off limiting your initial large style to a class:

table.complex-styling {
  large amount of styles..
}

In your css you can use css3 pseudo selector :not():

table:not(.no_style) {
    large amout of styles
}

Than those style won't apply to table.no_style. But browser support for css3 selectors is limited.

Just how much is a "large amount of styles"?

Considering this:

@paul...yes...I also agree, but the problem is mine is a legacy app and I have to change the style everywhere(lots of code to change) and if I miss anyone, it will result in style breaking. – rubyprince

Unless there's a joke quantity, your best bet is to override all properties defined on table to a sensible default.

To find out what the "default value" of each property is, see: How can I nullify css property?

A concrete example: http://jsfiddle.net/nE4qm/

table {
    font-size: 20px;
    color: red;
    margin: 20px;
    position: relative;
    left: 30px;
    text-align: center;
    border: 1px solid #000
}
.removeStupidTableCSS {
    font-size: medium;
    color: #000;
    margin: 0;
    position: static;
    left: auto;
    text-align: left;
    border: 0
}
.myShinyNewTable {
    color: blue
}

<table>
    <tr>
        <td>Old table</td>
    </tr>
</table>

<hr />

<table class="removeStupidTableCSS myShinyNewTable">
    <tr>
        <td>New table</td>
    </tr>
</table>

No & I wish there was. Unfortunately, overwriting the parent's styles is the only way to go.