重置嵌入式脚本的CSS

问题描述

我正在开发一个网站站长嵌入其网站的JS应用程序。它添加一个固定的元素到他们的网站有一定的功能，以及< style> 标签css在头为了风格它的页面。它在这方面与非常相似。

我无法为此要求找到正确的CSS规则：

• 我的样式不会重载页面中的元素样式


• 页面样式不会使我的样式重载


• 如果页面声明了一些 c $ c>



我在DOM中插入CSS，但我不能保证我的样式是最后一个插入

我不是在页面中编辑元素。我有一个容器，所有的元素都在该容器内。

我试过Meyer的CSS重置专门为容器和其中的所有对象，但网站规则仍然覆盖我的规则

我如何处理这个问题？

解决方案

一个样式表来定义你的模块？这里有一些提示：

1. 通过最后加载CSS覆盖样式。通常，为了避免jQuery UI被我的样式覆盖，我加载它的CSS最后为了安全。




2. 样式的顺序的重要性



3. 样式表样式


4. 内嵌样式


5. 
   
6. 
   
7. ！ /用户脚本样式（自定义浏览器字体和颜色）。



这就是为什么像jQuery这样的库应用内联样式（而不是addClass方法），因为它总是覆盖样式表样式， 。但您可以使用！重要

。这也是为什么jQuery UI样式表有非常长/特定的样式声明的原因。它越具体，越难以超越。为了演示，以下内容将始终是绿色的，即使红色的定义在其后面出现：

：

  < span class =red>我应该是红色< / span> 
 
 span.red {color：green} 
 .red {color：red} 
  

I'm working on a JS app that webmasters embed on their sites. It adds a fixed element to their site with a certain functionality, as well as a <style> tag with css in the head of the page in order to style it. It's pretty similar to wibiya in that aspect.

I have trouble finding correct css rules for this requirements:

• My styles won't overload styles of elements in the page
• The page style won't overload my styles
• My style should still have the upper hand if the page declares something important!

I'm inserting the CSS on DOM ready but I have no guarantees that that my style is the last one inserted into the page.

I'm not editing elements inside the page. I have a container and all my elements are within that container.

I tried Meyer's CSS Reset specifically for the container and all objects within, but the site rules still override my rules.

How would I approach this?

解决方案

so you have a stylesheet to style your "module"? here's some tips:

1. override styles by loading your CSS last. usually, so that i avoid jQuery UI from being overridden with my styles, I load it's CSS last for safety.

2. The order of styles' importance (as far as i remember) are in this order:

   1. browser styles
   2. stylesheet styles
   3. inline styles
   4. !important styles
   5. user-defined/user-script styles (custom browser fonts and colors).

   That's why libraries like jQuery apply inline styles (as opposed to addClass methods) because it always overrides the stylesheet styles, no matter the specificity. but you can override them using !important

3. Know specificity. this is also the reason why jQuery UI stylesheets have very long/specific style declarations. the more specific it is, the harder it is to override. to demonstrate, the following will always be green even if a definition of red comes after it:

demo:

<span class="red">I'm supposed to be red</span>​

span.red{color:green}
.red{color:red}

​

这篇关于重置嵌入式脚本的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！