Question

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

在Firebug的 HTML 面板中选择该元素时，通常您希望在样式侧面板中看到样式。我看到.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选择器以重新设置子元素，而不是查找少量元素并将类应用于每个元素。