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

Question

我的应用程序中有数据表插件。

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

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

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

Answer 1

您可以覆盖它使用的任何 CSS 类（请参阅此处的完整列表）。

然后，您只需创建另一个 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 特定规则使您的自定义样式比原始样式具有更高的优先级。

Answer 2

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