CSS样式不止一次应用

Question

任何人都知道为什么这是幸福的？

在一些jQuery-UI组件中会发生这种情况。不是唯一的一个。

搜索整个项目以获得重复的声明......没有。

样式检查员

链接声明

HTML

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-parceiras-habilitadas" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="true">
        <a href="#tab-parceiras-habilitadas" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1" data-controls-total="22">Habilitadas na plataforma (22)</a>
    </li>
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-parceiras-disponiveis" aria-labelledby="ui-id-2" aria-selected="true" aria-expanded="false">
        <a href="#tab-parceiras-disponiveis" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2" data-controls-total="2505">Disponíveis no sistema (2505)</a>
    </li>
</ul>

Answer 1

这是有效行为，因为CSS匹配两个规则.ui-state-default和.ui-widget-header .ui-state-default。

如果您检查以下代码，您会注意到当.div2位于.div1内时，规则会出现两次。就其本身而言，规则出现了一次。

.div1 .div2, .div2 {
  background-color: red;
}

<div class="div1">
  <div class="div2">Will match two rules</div>
</div>
<div class="div2">Will match one rule</div>

修改 正如@MaksymStepanenko在评论中所指出的，一些浏览器会过滤掉重复的内容（例如IE和Firefox）。这种行为似乎在webkit浏览器（Chrome，Safari和Opera）中很常见，也是Firebug选择显示重复规则的方式。