Question

的site.css：

a:link, a:visited, a:hover, a:active
{
    color: #0033CC;
    text-decoration: none;
}

页面中的

：

<a href="/foo/boo">test link</a>

jQuery的：

$('a').button();

jQuery很好地为“测试链接”创建了一个按钮，但按钮的不同状态下的一些文本颜色是在site.css中定义的，而不是jQuery主题。

所以这里的重点是为页面上的所有链接提供一些默认外观，而不会影响jQuery的主题。我做错了什么？

Answer 1

问题与伪元素有关：link，：visited，：active和：hover（从页面）覆盖jquery样式。伪元素的样式优先于类的样式。

就我个人而言，我还没有很好的解决方案。你可以编辑一些样式标签，使你的a.:visited a.:hover和a.:active成为正确的颜色，但是当你使用themeroller时这是一个正确的痛苦。

我个人认为themeroller应该注意这一点，生成样式，强制按钮显示正确的样式，即使在这些特定的伪元素下也是如此。

更长编辑：您要添加的样式是

a.ui-button：链接，a.ui-button：已访问 ...您想将这些添加到互动统计信息下的第一行，以便他们开始通常拥有的行。 ui-state-default，.ui-widget-content .ui-state-default，.ui-widget-header .ui-state-default

a.ui-button：悬停到第3行，通常是.ui-state-hover，.ui-widget-content .ui-state-hover，.ui-widget- header .ui-state-hover，.ui-state-focus，.ui-widget-content .ui-state-focus，.ui-widget-header .ui-state-focus

不确定是否有必要，但为了完整性我添加了

a.ui-button：active 到第5行，通常是.ui-state-active，.ui-widget-content .ui-state-active，.ui-widget-标题.ui-state-active

据我所知，这使得按钮显示正确。但就像我说的那样，如果你使用themeroller并允许多个主题，这是一个正确的痛苦。

Answer 2

它按预期工作，通过在页面中指定它优先于jQuery的定义。

http://www.w3schools.com/css/css_howto.asp

一般来说，我们可以说全部   风格将“级联”成一个新的   “虚拟”样式表由以下内容组成   规则，第四号有   最高优先级：


浏览器默认

外部样式表

内部样式表（在头部）

内联样式（在HTML元素中）

如果您愿意，可以将代码更改为：

<强>使用Javascript：

$("button").button();

<强> HTML：

<button>Button label</button>

将颜色应用于：链接，a：hover，a：visited和a：active搞砸了jQuery的.button（）主题？

2 个答案: