私はFrontifyに行き、Firebugの要素を調べたいと思っています。要素は<div class="mod mod-header fixed open">です。 FirebugののHTMLパネルでその要素を選択するとFirebugの要素に関連するCSSルールはどこにありますか？
、通常、あなたはスタイルサイドパネルのスタイルを見ることを期待します。 .mod-headerが表示されていますが、.fixedまたは.openは表示されていません。私はこれらのクラスが何をしているのかを見たいと思う。なぜ私はそれらを見ることができないのですか？
編集：これらのクラスを表示するには、下にスクロールするか、メニューをクリックする必要があります。
.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子要素ではなく、それらが適用されている要素を制御するために使用されています。
一番外側の要素に1つのクラスを追加し、それに応じてCSSセレクタを設定して、要素の数を見つけてそれぞれにクラスを適用するのではなく、子要素のスタイルを変更するほうが簡単です。