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

Posted

技术标签:

【中文标题】为一个 div 元素重置多个 CSS 样式【英文标题】:reset multiple css styles for one single div element 【发布时间】:2010-11-01 18:40:06 【问题描述】:

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

我在问,因为我找到了一个 jquery 语音框的教程,它有它自己的 css 文件。 我不能只将样式复制到我自己的 css 文件中,因为它会破坏已经设置样式的页面的其余部分。

我考虑过使用 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;

谢谢,理查德

【问题讨论】:

Reset/remove CSS styles for element only 的可能重复项 不是重复的,但肯定是相关的。 【参考方案1】:

试试这个:

div.foo, div.foo *

    // your styles

这会将样式应用于类为“foo”的div 及其所有后代。星号 (*) 被称为 universal selector,毫不奇怪,它可以选择任何类型的元素。

或者只针对直系子女:

div.foo, div.foo > *

    // your styles

【讨论】:

我相信他选择了所有后代 [或孩子] 加上 div 的内容 哦,逗号分隔选择器,明白了。我会试试的 逗号后面的空格很重要 是的,空间是必要的。请注意,所有浏览器都支持第一个示例(选择所有后代),而我相信除 IE6 之外的所有浏览器都支持第二个示例(仅选择子级)。 我确实使用了逗号之间的空格。使用 * 或 > * 某些样式会丢失。它不能完全替代上面的 css 代码。我只需要弄清楚这一点,谢谢。【参考方案2】:

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

【讨论】:

喜欢??而在 css...#shoutbox 重置样式 你说如果可行的话,这样做有没有缺点 不,iframe 必须使用 href 并指向另一个 html 页面(有自己的头部、正文等。标签之间的内容是不支持框架的浏览器的替代内容(几乎现在没有)。 iframe 的缺点是所有内容都在另一个文档中,您无法将任何 iframe 内容移出框架。 Google 可能会将 iframe 内容视为独立页面。优点是你的 JS/CSS 样式不会冲突。 iframe 很像辅助窗口(除了不太可能完全脱钩),因此这些 cmets 适用于这两种情况。 iframe 是一个完全独立于包含页面的 CSS 上下文,也是一个大部分独立的 javascript 上下文(如果 iframe 显示来自不同服务器的内容,则完全独立)。【参考方案3】:

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

有关选择器的更多信息,请查看 W3C 的文档。 CSS2 选择器信息是here

示例代码(我选择使用 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>

【讨论】:

以上是关于为一个 div 元素重置多个 CSS 样式的主要内容,如果未能解决你的问题,请参考以下文章

重置特定 div 的 CSS 样式

div元素的CSS样式规则,该元素属于嵌套在另一个元素类中的多个类

如何同时定义多个元素的CSS样式

jquery怎么获取下一个具有指定样式(class)的元素呢?

js如何修改样式?

通过 CSS 重置 HTML 元素的高度