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

Question

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

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

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

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 选择器以重新设置子元素的样式通常更容易，而不是查找少量元素并为每个元素应用一个类。