jquery - 如何避免插件的直接样式表修改

Question

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

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

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

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

Answer 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使您的自定义样式优先于原始样式。