防止CSS继承 [英] Prevent CSS Inheritance

问题描述

我试图编写一个可以移植到任何站点的jQuery插件。

我的插件做的是创建一个div并将样式应用于它。 / p>

它在独立模式下运行良好，但是当我将它放入站点的上下文中时，就有一个它正在继承的css类。问题是，我无法修改网站现有的CSS ...所以我需要一种防止继承的方法（我知道这在技术上是不可能的）。

<我已经尝试过！在导致问题的特定风格上的重要标志，但无济于事。我正在寻找一个正确的方向比特定的代码更多，所以这就是为什么我没有发布我的所有代码...

另一件事是我不想使用iframe而不是div，因为我需要能够提供表单与我的div进行交互的能力。

然而，

  * {$ b（我无法修改）导致我的问题的两个css类： $ b font-weight：inherit; 
 font-style：inherit; 
 border：0无; 
 outline：0; 
 padding：0; 
保证金：0; 
} 
 
 html {
 width：100％; 
身高：100％; 
 font-size：10px; 
 
  

解决方案

CSS不是继承 - 而是级联（这是CSS中的第一个C）。了解这一点，你可以通过几种方法解决你描述的问题：

<1>通过脚本将内联样式添加到元素中。内联样式优先于CSS规则，无论是来自类，ids还是元素。

2）以编程方式添加您自己的CSS文件。 CSS按照规则在文档中出现的顺序级联。你可以在页面底部写一个CSS link 元素来包含你的插件的CSS规则。由于这些文件可能比网站的CSS文件要低或稍后，因此您的规则优先。
$ b 3）编写样式标记编程到文档的底部。这里的概念与＃2相同，但没有外部文件。

我个人倾向于＃1。如果您希望您的插件在外观上保持一致，无论发生什么事情，无论使用哪个网站，唯一确定的方法是将内联样式应用到您的样式。

也就是说，通过使用CSS类来定制插件的界面是有价值的。也许你正试图带走一些你不应该拥有的东西。例如，如果整个站点使用Serif字体，并且您在插件的用户界面上强制使用Sans字体，则现在插件的外观与该站点不一致。当有人考虑你的插件时，这可能是一个破坏行为......在可重用代码的世界里，定制是一件好事，而CSS是实现它的方式。

I am trying to write a jQuery plugin that can be ported to any site.

What my plugin does is create a div and applies a style to it.

It works well in standalone but when I put it into the context of a site, there is a css class that it is inheriting from. The thing is, I can't modify the web site's existing CSS... so I need a way to "prevent inheritance" (which I know is technically not possible).

I have tried the !important flag on the specific styles that are causing problems, but to no avail. I am looking for a point in the right direction more than specific code, so that's why I'm not posting all of my code...

The other thing is that I do not want to use an iframe instead of a div because I need to be able to provide the ability for a form to interact with my div, potentially.

However, the two css classes from the web site (which I can not modify) that are causing my problems are:

* {
    font-weight: inherit;
    font-style: inherit;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

html {
    width: 100%;
    height: 100%;
    font-size: 10px;
}

解决方案

CSS isn't inheritance-based, but rather "cascading" (it's the first C in "CSS"). Understanding that, there are a few ways you could work around the issue you describe:

1) Add inline styles to your element via script. Inline styles take precedence over CSS rules, either from classes, ids, or elements.

2) Add your own CSS file programmatically. CSS cascades in the order the rule appears in the document. You can write a CSS link element to the bottom of the page to include your plugin's CSS rules. Since these are presumably lower or "later" in the document than the site's CSS, your rules will take precedence.

3) Write a style tag to the bottom of the document programmatically. Same concept here as #2, but without an external file.

I would personally tend toward #1. If you want your plugin to be consistent in appearance no matter what else is going on, no matter what site it is used on, the only way to be sure is to apply your styles inline.

That said, there's value in making your plugin's interface customizable by using CSS classes. Maybe you're trying to take something away that you shouldn't. For instance, if the entire site uses a Serif font, and you're forcing a Sans font on your plugin's UI, your plugin's look and feel is now at odds with the site. That could be a deal-breaker when someone is considering your plugin... customization is a good thing in the world of reusable code, and CSS is the way to make it happen.

这篇关于防止CSS继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！