我正在构建一个使用CSS样式的jQuery插件来为嵌套的DIV标签添加颜色和边距.由于我宁愿将插件保存为单个文件,我的代码使用jQuery的.css()方法将这些颜色和边距直接作为CSS属性添加到DIV. (当初始化插件时,可以自定义这些属性的值.)
然而,我也想让用户使用自己的样式表来设计这些DIV,所以我也向每组DIV添加了类(也可以为这些名称定制).这似乎是提供最好的两个世界的最佳方式.
唯一的缺点似乎是inline style =“…”属性(由jQuery的.css()方法生成)总是覆盖外部样式表中设置的类样式.当然,我可以在样式表中使用！重要的样式,但这样做一次又一次是麻烦的.
所以：我真正想要的是一种使内联样式自动优先于外部类样式的方式,而不必使外部类样式更为重要.
解决方法
What’s the opposite of
!importantin CSS?
没有完全相反的,但是有较低的优先选择器.
w3c spec defines the cascade,可能会读它.
内联样式具有最高优先级,而且您是以低优先级风格,您需要通过样式表或样式元素添加CSS.
$('<style type="text/css">.foo {color: #FF0000;}</style>').prependTo('head');
您将要找到的问题是,在样式表中指定了.foo的用户将需要更高的特异性来赢得风格元素,因此我建议为每个元素使用一个额外的类,以便用户可以覆盖默认值：
.foo.override { color: #0000FF; }
在所有情况下,您都要仔细挑选您的选择器,使其具有最小的特异性.
