reset multiple css styles for one single div element

问题

my question is if it is possible to reset css styles (a lot off them) for a single div and all elements that are contained in that div.

I am asking, because I found this tutorial for a jquery shoutbox that has it's own css file. I can not just copy the styles over to my own css file, because it will screw up the rest off the page where the styles are already set.

I thought off using a divwrapper and apply all those resets only to that one. I am just not sure if it's possible

I only know this way

#divwrapper td{ set styles }

@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}

thanks, Richard

回答1:

Try this:

div.foo, div.foo *
{
    // your styles
}

which will apply the styles to the div with class "foo" and all its descendants. The star (*) is known as the universal selector, and not surprisingly, selects elements of any type.

Or for just the immediate children:

div.foo, div.foo > *
{
    // your styles
}

回答2:

if practical you could put all content to be 'reset' in an iframe. The iframe contents won't inherit anything.

回答3:

As mentioned previously @Noldorin, you want a selector that selects all descendants (or children) using the universal selector.

For more info on selectors, check out W3C's documentation. CSS2 selector info is here

Example code (i've chosen to use a selector by ID as opposed to class) to illustrate:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reset</title>

<style>
.red{
    color: red;
}
.blue{
    color: blue;
}
.green{
    color: green;
}

#reset *{
    color: black;
}

#resetc > *{
    color: black;
}

</style>
</head>
<body>
<h1>With Descendant Reset Style</h1>
<div id="reset">
  <div class="red">Red</div>
  <p class="green">Green<span class="blue">Blue</span></p>
</div>

<h1>With Child Reset Style</h1>
<div id="resetc">
  <div class="red">Red</div>
  <p class="green">Green<span class="blue">Blue</span></p>
</div>

<h1>Without Reset Style</h1>
<div>
  <div class="red">Red</div>
  <p class="green">Green<span class="blue">Blue</span></p>
</div>
</body>
</html>

来源：https://stackoverflow.com/questions/974980/reset-multiple-css-styles-for-one-single-div-element

标签

jquery

css

styles

css-reset