-3

私は現在、いくつかの CSS スタイルのライブラリを作成しています (jQuery で定義されているものもあります。そのため、解決策として JavaScript/jQuery を自由に使用してください。通常の CSS ではどちらの方法でも可能ではないと思います)。

特定のクラス (例では .style-container) を持つ親要素が存在する場合にのみ適用されるはずのパーツがいくつかあります。

もちろん、これはすべての CSS セレクターの前にクラスを追加することで可能です。

ただし、転送する必要があるデータがさらに多く必要になるため、CSS ファイルを適用する可能性があり、それは特定の要素だけのコンテンツであり、ドキュメント全体ではなく子であると考えました。

この CSS を想像してみてください (かなり単純化されています):

h1 {
   color: #f00;
   border-bottom: 1px solid #000;
}

この HTML ドキュメント (本文の一部):

<div class="style-container">
   <h1>This should be styled</h1>
</div>
<div>
   <h1>This should be standard style</h1>
</div>

そして今、クラスとその子要素を持つすべての要素のファイルをロードするための JavaScript/jQuery がいくつかあるかもしれません。

ノート：

以前はなかった JavaScript/jQuery を介して新しい要素が表示される可能性があり、コンテンツが非常に速く変更された場合に、読み込みに多くのリソースが必要になる可能性があるため、スタイル全体を再度読み込みたくありません。

また、待機することもできません。待機している間、要素のスタイルが設定されないためです。

編集: もう一度指摘します: 標準の CSS 子セレクターよりも優れたオプションを探しています。これは次のように機能します。

.style-container h1 {
   color: #f00;
   border-bottom: 1px solid #000;
}

サーバーからクライアントに転送されるデータが多くなるため、これが必要です。これを理解するには: コードの一部を最小化した形式でセレクターを使用する場合と使用しない場合があります。セレクターがあるバージョンは 3698 文字、セレクターがないバージョンは 2538 文字必要です。それは1160文字の違いです。または、kB では、3.61kB - 2.47kB = 1.14kB の差があります。それは非常に小さいように見えますが、コードのごく一部にすぎません。コードは 10 倍の大きさになると予想しています。これにより、11.4kB の差が生じます。私の意見では、それはモバイルデバイスにとってかなり大きな量です...

4

3 に答える 3

0

あなたの場合、要素のスタイルを設定するために毎回スクリプトを使用してスタイルをロードするのではなく、CSS でのみ使用することをお勧めします。css セレクターは、DOM でセレクターを見たときにすぐに読み込まれるためです。CSS:

div.style-container> h1{
   color: #f00;
   border-bottom: 1px solid #000;
}

>クラスの直後の h1 を示します。つまり.style-container、すべての子から子への子ではなく、子だけです。

div.style-container h1 {
    color: #f00;
    border-bottom: 1px solid #000;
}

Spaceクラスの下のすべての h1 要素を読み取ります。つまり、子から子への.style-container子と一緒に子を考慮します。

于 2015-05-06T08:03:10.840 に答える
0

これは基本的な CSS です。

要素の子 (第 1 レベルの子) である H1 をスタイルするには (例では div を使用しますが、div は .style-container または任意のクラス / ID に置き換えることができます):

div > h1 {
    color: #f00;
    border-bottom: 1px solid #000;
}

次のように単純に使用することもできます。

div h1 {
    color: #f00;
    border-bottom: 1px solid #000; 
}

後者は、div 内のすべての h1 に適用されます。

于 2015-05-06T08:01:23.170 に答える