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

Question

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

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

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

Answer 1

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

如果您查看 <div class="mod mod-header fixed"> 的第一个子元素，您会看到 <div class="row header">。 Select 检查器中的那个元素。您现在会注意到 .fixed 是如何使用的。您将在检查器 window.

中看到以下 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 被用来控制子元素，而不是它们所应用到的元素。

将单个 class 添加到最外层元素并相应地设置 CSS 选择器以重新设置子元素样式而不是查找少数元素并应用class 给每个人。

Where can I find the CSS rule related to an element in Firebug?