0

给定一个 html 片段：

<button id="foo" onclick="window.location.href='/foo/';" 
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only btn btn-primary" type="button" name="btn" id="btn" role="button" aria-disabled="false"><span class="ui-button-text">Join Now »</span></button>

为什么 chrome 和 Mozilla 都选择这个规则：

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{...}

当我希望他们选择时：

.btn .btn-primary .ui-widget .ui-widget-content .ui-state-default .ui-button .ui-button-text-only button,
.btn-primary {...}

Firebug 显示了两个规则都被应用了，但是无论多么“选择性”，我认为我正在制作第二个选择器链，第一个选择器显示在顶部，第二个选择器的样式在列表的下方，全部被覆盖（在萤火虫 UI 中删除）

FWIW，我确实验证了添加基于 id 的选择器确实首先被选中。我只是不想到处分配ID。如：

#foo,
.btn-primary {...}

谁能帮我使上面的第二个 CSS 选择器比第一个更具体？

这一切都与我在最近发布的 primefaces 引导主题中发现的一个错误有关，该主题模仿引导样式。就我而言，我也在使用实际的引导程序，并希望将 btn-primary 之类的样式应用于 pf commandButtons 等。

这工作正常，直到您将 commandButton 放在 primefaces 面板中......此时 pf 主题中的按钮样式正在破坏引导程序的样式。我原以为我可以在 bootstrap css 中添加一个选择器，让它从 pf 中获取特异性……但显然我有更多的 CSS 选择器 Star Wars 可以玩…… http://www.stuffandnonsense .co.uk/archives/css_specificity_wars.html

4

1 回答 1

2

感谢提供重要线索的 BoltClock 解决了。

为了在 pf 主题中选择引导 css 类，添加到引导按钮-* 类的选择器如下所示：

.btn-primary.ui-button

注意类名和句点之间没有空格。这意味着选择具有两个类的元素。

所以原来的引导 css 有：

.btn-primary {...}

我只是添加了另一个选择器来包含 pf ui-button 类。

.btn-primary.ui-button,
.btn-primary {...}

现在，当按钮位于 PrimeFaces 面板中时，我将成功使用引导程序 btn-primary、btn-info、btn-success 等作为 PrimeFaces 中的类名。

于 2012-10-10T08:25:06.363 回答