为一个div元素重置多个CSS样式

发布于 2024-07-24 09:52:41 字数 855 浏览 2 评论 0原文

我的问题是是否可以为单个 div 重置 css 样式（很多）以及该 div 中包含的所有元素。

我之所以问，是因为我发现了这个关于 jquery Shotbox 的教程，它有自己的 CSS 文件。我不能只是将样式复制到我自己的 css 文件中，因为它会搞乱已设置样式的页面的其余部分。

我考虑使用 divwrapper 并将所有这些重置仅应用于该 divwrapper。我只是不确定是否可能，

我只知道这种方式，

#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;
}

谢谢，理查德

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

○闲身 2024-07-31 09:52:41

试试这个：

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

这会将样式应用到类为“foo”的 div 及其所有后代。星号 (*) 称为 通用选择器，毫不奇怪，选择任何类型的元素。

或者只针对直系孩子：

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

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 原文

我一直都在从未离去 2024-07-31 09:52:41

如果可行的话，您可以将所有内容“重置”到 iframe 中。 iframe 内容不会继承任何内容。

回复收藏 0 原文

新雨望断虹 2024-07-31 09:52:41

正如前面提到的@Noldorin，您需要一个使用通用选择器选择所有后代（或子代）的选择器。

有关选择器的更多信息，请查看 W3C 的文档。 CSS2 选择器信息位于此处

示例代码（我选择使用选择器通过 ID 而不是类）来说明：

<!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>

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 原文

~没有更多了~