html - Firebug 在右侧面板中两次显示类名及其位置

Question

当我检查带有 .mlm-clearfix 类的 div 时，firebug 在右侧面板中两次显示此类名称及其 url。 Easy Clear Method为该类给出的样式声明为

.mlm-clearfix:before,
.mlm-clearfix:after {
   content: '\0020';
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0; 
}

当我删除一个选择器并将其修改为

.mlm-clearfix:after {
   content: '\0020';
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0; 
}

问题消失了。但这不会发生在其他组合类选择器上，例如

.search-table td input,
.search-table td select {
    width: 200px;
}

css 文件没有链接两次。这可能是什么原因？请帮忙。

Answer 1

:before 和 :after 是 pseudo-elements . (它们的正确语法实际上是 ::before 和 ::after)。包含它们的选择器不会为所选元素本身设置样式，而是定义将设置样式的新元素。

Firefox API Firebug (2.0.x) 内部 uses只允许获取给定伪元素的所有样式。尽管 Firebug 不会检查是否已经存在另一个伪元素的相同规则。因此该规则将在 Style side panel 中显示两次.

一旦这些伪元素显示在 HTML panel 中的 HTML 结构中，这个问题就会得到解决。而不是 Style 侧面板(参见 issue 5785)。