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

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 主题中发现的错误有关。就我而言，我也在使用实际的 Bootstrap ，并希望将 btn-primary 等样式应用于 pf commandButtons 等。

在您将命令按钮放入 primefaces 面板之前，它工作正常...此时 pf 主题中的按钮样式正在破坏 Bootstrap 样式。我原以为我可以向 Bootstrap css 添加一个选择器，让它从 pf one 中获取特定性……但显然我有更多的 CSS 选择器星球大战要玩……http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 1

感谢 BoltClock 提供了重要线索。

为了让 bootstrap css 类在 pf 主题类上被选中，添加到 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 中的类名。