Question

给出一个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显示两个规则都已应用，但无论我如何“更具选择性”，我认为我正在制作第二个选择器链，第一个选择器显示在顶部，而第二个选择器显示在列表的下方，所有被覆盖（在firebug UI中罢工）

FWIW，我确实确认首先选择添加基于id的选择器。我只是不想要四处分配ID。如：

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

有人可以帮助我让第二个css选择器比第一个更具体吗？

这一切都与我在最近发布的模拟bootstrap样式的primefaces bootstrap主题中发现的bug有关。在我的例子中，我也使用实际的bootstrap，并希望将btn-primary等样式应用于pf commandButtons等。

这很好用直到你把一个commandButton放在一个primefaces面板中......此时pf主题的按钮样式正在破坏引导程序。我曾经以为我可以在bootstrap css中添加一个选择器以使其从pf中获取特异性...但显然我有更多的CSS选择器星球大战来玩.... http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 1

感谢BoltClock提供了重要线索。

为了在pf主题上选择引导程序css类，添加到bootstrap button- *类的选择器是这样的：

.btn-primary.ui-button

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

原来的bootstrap css在哪里：

.btn-primary {...}

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

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

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

为什么这个CSS选择器不比另一个更具体？

1 个答案: