CSS: reset styles defined in an untouchable stylesheet

I need a simp开发者_如何转开发le <hr/> in a page that extends a default one (I'm using Django template framework); in this default page, a standard and untouchable stylesheet styles HR with border:none; height:1px but I would like to reset these styles to their default values.

I tried putting {border:1px inset; height:auto;} in my page but I didn't get the same aspect as having no style at all.

Is there a method to restore the default style for a tag?

---

In order to make your rule apply, you'll need to ensure that you give your rule a greater specificity than the existing rule in order to override it.

For example, if the rule is this:

 hr {
   /* rules */
 }

Then you would need to do something like this:

html hr {
  /* your rules */
}

Scores are calculated by these basic rules:

• elements, like div are worth one point
• classes, like .comment are worth 10 points
• ids, like #user123 are worth 100 points
• The total score for the selector is the sum of all of its parts, so div.class is worth 11 (10 for the .class and 1 for div

(It's actually a bit more complicated than this - see this article for details - but this explanation works as a general rule)

Edit:

I just saw your comment about not knowing the defaults.

According to Firebug, an hr appears to look like this:

 hr {
   height: 0;
   width: 100%;
   border: 1px solid #808080;
   margin: 8px 0;
 }

You can use the tools provided in other browsers to see if they use a different set of styles, then decide for yourself which ones would be the best ones to use.

---

Try YUI 2 Base CSS, seems to be doing what you want. Or even YUI 3 Base CSS

There is a possibility to "restore" default styles only for a certain context

Update Just checked - Base CSS does not include styles for hr element

---

The default stylesheet for HTML documents, without any overrides, is defined by the W3C. You can find the full default stylesheet here: http://www.w3.org/TR/CSS2/sample.html

Alternatively, you could use Firebug in Firefox (or any similar tool) to view the styles of an <hr /> element on a test page without any styles applied.

---

Sure, you need to give your styles a bigger weight; add an id to your < hr/>, or do this in CSS:

 html body hr { ... your styles ... }

---

No. You either have to not apply the styles in the first place, or override every broken style with explicit values.

---

You can also give your styles more weight with the !important property. If the original is like this:

.someClass { color: red }

You can override it with this:

.someClass { color: green !important}