Question

我正在使用基于主题的jQuery UI库。

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

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

Answer 1

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

Smashing Magazine有一个article，可能有更多关于特异性问题的信息。

Answer 2

你也可以：

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

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

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

效果很好！

Answer 3

我认为按钮API应该包含这样的配置，你可以通过传递参数来改变颜色等

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

这只是一个可以改变其视觉属性的想法。

Answer 4

我想说，给特定按钮或按钮一个id，并且：

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

如果您想将它应用于多个按钮，每个按钮都有自己的ID：

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

Answer 5

我发现这对我有用： $（ “btnSave。 ”）removeClass（“ UI-状态默认 ”）addClass（“ SaveButtonStyling”）;。。

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

Thsi意味着圆角等级等等，我能够修改背景颜色等。

Answer 6

如果您只是希望为特定按钮添加一些额外的/不同的，只需给按钮一些类如class =“mybuttonclass otherbuttonclass” - 允许多个类。然后，只需为您的班级添加css规则

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

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

jQuery UI按钮：如何覆盖用于单个按钮的类？

6 个答案: