5

我正在使用开箱即用的jQuery UI库，基于一个主题。

将链接呈现为按钮很棒，但是我需要覆盖一些具有不同颜色的按钮。

如何为要使用的特定按钮指定特定类？

4

6 回答 6

5

我建议查看 jQuery UI 按钮的 CSS 并复制指定按钮的 CSS 结构，但使用您自己的类而不是 jQuery UI 类。在此 CSS 中进行您需要的覆盖并将其包含在 jQuery UI CSS 之后。CSS 使用最具体的选择器和排序的组合来确定要应用的值。通过这样做，您将确保 jQuery 使用的每个 CSS 选择器具有相同的特异性，以便您的 CSS 根据顺序优先。

Smashing Magazine 有一篇文章可能比您想知道的有关特异性问题的信息更多。

于 2010-03-08T13:16:34.593 回答
3

你也可以：

  1. 在浏览器中使用开发者工具（Chrome 有很棒的工具）。
  2. 查看 jQuery UI 中的哪个类定义了按钮颜色。
  3. 在你的 CSS 文件中用“！important”属性覆盖它。

例如，当我需要覆盖 jQuery UI 微调器控件并删除边框时，我找到了使用 Chrome 开发工具定义边框的类。然后在 CSS 中：我添加了类似的内容：

.<jquery-ui-class-that-i-found> { border: 0px !important; }

效果很好！

于 2013-05-10T15:22:58.117 回答
2

我会说，给特定的按钮一个或多个按钮一个 id，并且：

$("#buttonId").removeClass().addClass("myClass");

如果要将其应用于多个按钮，每个按钮都有自己的 id：

$("#buttonId, #anotherButton").removeClass().addClass("myClass");
于 2010-03-08T13:06:21.893 回答
2

我认为按钮 API 应该包括这样的配置，您可以在其中通过传递参数来更改颜色等

$("button").button({background:"FFFFFF",hover:"FFFFF"});

这只是一个想法，您可以在其中更改其某些视觉属性。

于 2012-10-10T16:00:17.717 回答
1

我发现这对我有用： $(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");

基本上需要删除 ui-state-default 类，然后添加我自己的背景颜色等。

这意味着圆角类等保持不变，我可以修改背景颜色等。

于 2012-03-07T11:48:11.073 回答
0

如果您只是希望为特定按钮添加一些附加/不同，只需为按钮提供一些类，例如 class="mybuttonclass otherbuttonclass" - 允许多个类。然后，只需为您的课程添加 css 规则

.mybuttonclass
{
   background-color: red;
}
.otherbuttonclass
{
   color:white;
}

因此背景是红色的，带有白色文本 - 或您希望的任何组合，这将覆盖其上方的级联 (CSS) 中的项目。（假设您的 .CSS 文件在 jquery UI css 文件之后链接，或者在页面上嵌入，这两者都会覆盖 jQuery UI css。

于 2010-03-08T13:10:09.550 回答