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

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




2. 样式的顺序的重要性



3. 样式表样式


4. 内嵌样式


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

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

演示：

  < 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}

​