如何避免插件的直接样式表修改答案

【问题标题】：How to avoid direct stylesheet modifications of plugin如何避免插件的直接样式表修改
【发布时间】：2013-09-30 10:23:27
【问题描述】：

我的应用程序中有datatable 插件。

为了修改UI外观，我对插件自带的样式表做了些微改动。

直接更改插件附带的样式表不是一个好主意，因为对插件的任何更新都会覆盖任何自定义更改。

有没有办法避免这个问题？

【问题讨论】：

【解决方案1】：

您可以覆盖它使用的任何 CSS 类（参见完整列表 here）。

然后您只需创建另一个 CSS 文件，该文件将在插件的 css 文件之后加载并覆盖它的类（或使用其他 CSS 技术来获得更高的 CSS 优先级）。

例如：

在原始 DataTables CSS (demo_table.css) 文件中，您可以找到：

.sorting_desc_disabled
{
     background: url('../images/sort_desc_disabled.png') no-repeat center right;
}

假设您想要另一个箭头图标，您需要创建自己的 CSS 文件 (my_demo_table.css)：

.sorting_desc_disabled
{
     background: url('../images/my_own_disabled_arrow.png') no-repeat center right;
}

同样，您必须确保您的自定义 CSS 将在原始 CSS 之后加载，或者利用 CSS Specifity Rules 让您的自定义样式优先于原始样式。

【讨论】：

请提供任何示例
我用例子修改了我的答案。
太酷了，非常感谢。我会试试这个步骤，非常感谢
我对此有一个疑问，首先我正在加载 site.css，然后我正在加载 datatable.css 文件，所以在这种情况下，我首先需要加载 datatable.css，然后我有加载我的 site.css 以访问 ovveride 对吗？
是的。但我不认为建议依赖样式表加载顺序。您最好使用CSS Specifity Rules (coding.smashingmagazine.com/2007/07/27/…) 覆盖。

【解决方案2】：

在单独的样式表中写入您需要的样式更改，其中选择器的优先级高于默认 DataTables 样式表中的选择器。

【讨论】：