reset multiple css styles for one single div eleme

2019-02-03 05:19发布

站内问答 / jQuery
1779 3 5

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

3条回答
闹够了就滚
2楼-- · 2019-02-03 05:34

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>
查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-02-03 05:35

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
}
查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
4楼-- · 2019-02-03 05:42

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)