简体繁体 English

设置div元素内元素的格式，而不会继承CSS

[英]Formatting of elements inside a div element without effect of inherited css

原文 2010-11-24 11:18:50 4 2 javascript/ html/ css/ dom

I'm showing a popup as a fixed div in random websites. 我正在随机网站中将弹出窗口显示为固定div。

I need the content of the div to not be effected by the formatting of the page it resides in. The elements inside the div has inline CSS, and I want only the inline CSS to be effective, not inherited CSS. 我需要div的内容不受其所在页面格式的影响。div内的元素具有内联CSS，并且我只希望内联CSS有效，而不是继承的CSS。

One way to do that is to use iframe. 一种方法是使用iframe。 I'm looking for other ways. 我正在寻找其他方式。

Options I'm considering: 我正在考虑的选项：

A small javascript code which will run on all elements and reset inherited css. 一个小的JavaScript代码，它将在所有元素上运行并重置继承的CSS。 Is it possible? 可能吗？ Can I tell cross-browser that an attribute is not created by inline css? 我可以告诉跨浏览器，属性不是由内联CSS创建的吗？
Javascript code to reset a group of attributes to all elements inside a div (for example all padding, margins etc. but still leave the style attributes from inline css? Javascript代码可将一组属性重置为div中的所有元素（例如所有填充，边距等），但仍保留内联CSS的样式属性？

any other creative idea on how to do it? 还有其他关于如何做到的创意吗？

2 个解决方案

The elements inside the div has inline CSS, and I want only the inline CSS to be effective, not inherited CSS div中的元素具有内联CSS，我只希望内联CSS有效，而不要继承CSS

This is the default behavior. 这是默认行为。 Inline CSS has the highest precedence. 内联CSS具有最高优先级。

AFAIK you won't be able to remove the inherited styles unless you override those. 除非您重写继承的样式，否则您将无法删除继承的样式。

Another option (though whether a practical one depends on your site) is to have a class called "resetCSS" or something like that which can be applied to a class. 另一种选择（尽管实际的选择是否取决于您的站点）是拥有一个名为“ resetCSS”的类或可以应用于该类的东西。 You use this class in a selector and in here you can set the base values for all the attributes you use (eg margins, fonts, etc.). 您可以在选择器中使用此类，在此处可以为所使用的所有属性（例如，边距，字体等）设置基值。

Then in use you apply that class to an element and that will reset everythign to default values which you can then override with your CSS. 然后，在使用中，您将该类应用于元素，这将重置所有内容为默认值，然后您可以使用CSS覆盖这些默认值。

The other alternative is to change all your current CSS to have a "styled content" class in the selector so that only content that is marked up specifically will receive the styling so that there is no chance of it being applied to the elements you don't want to have it. 另一种选择是将当前所有CSS更改为在选择器中具有“样式化内容”类，以便只有专门标记的内容才会收到样式化，这样就不可能将其应用于您没有的元素。不想拥有它。

Probably though if you want a div to have a particular style, even if that is the default, it is best to actually give it that style explicitly. 即使您希望div具有特定的样式，即使这是默认样式，也最好将它明确地赋予该样式。 If it was using the default anyway you lose nothing, if it was inheriting something else then you are setting it to what you want. 如果仍然使用默认值，则不会丢失任何内容；如果它继承了其他内容，则将其设置为所需的值。 Relying on default styles could bite you because there is no reason that any two browsers should have the same default styles at all. 依赖默认样式可能会给您带来麻烦，因为没有理由让任何两个浏览器完全具有相同的默认样式。