logo标签列表

重置一个单独div元素的多个CSS样式

jquerycssstylescss-reset
15
我的问题是是否可以重置单个div及其包含的所有元素的css样式（很多个）。
我问这个问题是因为我发现了一个jquery shoutbox的教程，它有自己的css文件。 我不能只将样式复制到我的css文件中，因为它会破坏已经设置好的页面其他部分的样式。
我想使用一个div-wrapper，并仅将所有这些重置应用于该div。只是我不确定是否可能。
我只知道这种方法。
#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;
}

谢谢，Richard

可能是Reset/remove CSS styles for element only的重复问题。 - T.Todua
不是重复，但肯定有关联。 - Shog9
3个回答
12

试试这个：

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

这将应用样式于 class 为 "foo" 的 div 元素及其所有子元素。星号 (*) 被称为 通用选择器，可以选择任何类型的元素。
或者只选择直接子元素：
div.foo, div.foo > *
{
    // your styles
}
我相信他正在选择所有后代[或子元素]以及div的内容。 - tschaible
哦，逗号分隔选择器，明白了。我会尝试一下。 - Richard
1
這是關於編程的內容，請把以下英文文本翻譯成中文。僅返回翻譯後的文本：逗號後面的空格很重要。 - SpliFF
1
是的，空格是必要的。请注意，第一个选择所有后代元素的示例在所有浏览器中都受支持，而第二个仅选择子元素的示例在所有浏览器中都受支持，除了IE6。 - Noldorin
我在逗号之间使用了空格。使用 * 或 > * 会丢失一些样式。这并不完全替代上面的 CSS 代码。我只是需要弄清楚这个问题，谢谢。 - Richard
@Richard - 如果你做错了什么，那就是另一回事了。div.foo，div.foo * {} 是可以工作的，为什么不把你尝试的代码放在你的问题上呢？ - Ryan Florence
4
如果可行的话，您可以将所有需要“重置”的内容放入一个iframe中。iframe的内容不会继承任何东西。
喜欢使用<iframe id="shoutbox">所有元素</iframe>吗？ 在CSS中...#shoutbox{重置样式} 你说如果实用，这样做有什么缺点吗？ - Richard
不，iframe必须使用href并指向另一个HTML页面（具有自己的head、body等）。标签之间的内容是为不支持框架的浏览器提供的替代内容（现在几乎没有这样的浏览器了）。 - SpliFF
iframes的缺点是所有内容都在另一个文档中，无法将任何iframe内容移动到框架外。Google可能会将iframe内容视为独立页面。优点是您的JS / CSS样式不会冲突。 - SpliFF
一个 iframe 很像一个次要的窗口（除了不太可能完全脱钩），因此这些注释适用于两种情况。Iframe 是与包含页面完全分离的 CSS 上下文，也是一个大部分分离的 JavaScript 上下文（如果 iframe 显示来自不同服务器的内容，则完全分离）。 - podperson
2

正如@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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接