在哪里可以找到与Firebug中的元素相关的CSS规则

Question

我正在浏览Frontify，我想检查Firebug中的一个元素。元素是<div class="mod mod-header fixed open">。

在Firebug的HTML面板中选择该元素时，通常您会在styles侧面板中看到样式。我看到那里列出了.mod-header，但没有列出.fixed或.open。我想看看这些课是做什么的。为什么我看不到它们？

编辑：您必须向下滚动或单击菜单才能查看这些类。

Answer 1

.fixed被用作我所说的作用域选择器。作用域选择器可能有自己的样式，但它也用于控制它和相关CSS选择器影响其他元素的位置。您经常会看到模块/组件使用这种方法。

如果您查看<div class="mod mod-header fixed">的第一个子元素，您将看到<div class="row header">。在检查器中选择该元素。现在您将注意到.fixed是如何使用的。您将在检查器窗口中看到以下CSS选择器。

.mod-header.fixed .header {
    z-index: 10;
    padding: 15px 0;
    max-width: 100%;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
}

因此.fixed和.open被用来控制子元素，而不是它们所应用的元素

通常，将单个类添加到最外层的元素并相应地设置CSS选择器以重新设计子元素的样式会更容易，而不是找到少数元素并将一个类应用于每个元素。