.example .pp{ color: orange; }.example.pp2 { color: green; }
たとえば、上記の 2 つの定義のうち、1 つは中央にスペースがあることを意味し、もう 1 つは中央にスペースがないことを意味します。
第一个class要这样写生效:<p class="example">文字文字<span class="pp">pp这个class生效</span>....</p> 第二个class要这样写生效:<p class="example pp2">pp2这个class生效</p>
すみません、これはなぜですか? ?
.example .pp = E F は子孫セレクターです。
.example.pp2 は要素上にあります。この要素は、これら 2 つのクラスが含まれている場合にのみ効果があります。
この 2 つは大きな違いがあります。
.example .pp は子孫セレクターを示すスペースで区切られており、.example 内の .pp が選択されます。
例:
<div class="example"> <div class="pp">被选择的元素</div> </div>
.example.pp は、クラス内の example と pp の両方を含む要素を選択します。
例:
<div class="example pp"> 被选择的元素 </div>
これは CSS セレクターの形式で、スペースのない選択条件は「and」関係、スペースのある選択条件は「親子」関係、および間接的な「親子」になる可能性があることを規定しています。関係
<style> .e1.e2{ background-color:yellow; } .father .e3{ background-color:green; } </style> </head> <body> <div class="father"> <p class="e1 e2">我住在 Duckburg。</p> <p class="e3">我也住在 Duckburg。</p> <div> <p class="e3">他也住在 Duckburg。</p> </div> </div> </body>
上記のコードの最初の段落 p には、e1 と e2 という 2 つのクラスがあります。class 属性のスペースと CSS のスペースは異なる意味を持っていることに注意してください。そして先ほどのcss内のスペースについて スペースとは「親と子孫」の関係です。
最初の p は、CSS が .e1.e2 セレクターを使用してこの色を設定するため、黄色でレンダリングされます。つまり、この段落には両方のクラスがあります。もちろん、CSS で .e1.e2 の代わりに .e1 のみを使用しても同じ効果を達成できますが、CSS セレクターが誤って他のタグにヒットしたくない場合があるため、詳細に記述するだけです。
2 番目の p は、.father .e3 によって緑色にレンダリングされます。これは、p のクラスが e3 であり、クラス Father を持つタグの子孫であるため、緑色に染まります。
同様に、3 番目の p も、父親の直接のサブクラスではありませんが、緑色に変わり、スペースを含むこのセレクターに間接的な子孫を含めることができることを示します。
要素を選択するために複数のクラス セレクターを使用する必要がある理由については、上で明確に説明しました
1. CSS の中国語訳はカスケード スタイル シートであり、そのスタイルは継承とオーバーライドに基づいています。最終的なスタイルを生成します。
2. CSS スタイルの重みを計算するための一連のルールがあり、より大きな重みを持つものが最終スタイルとなるため、以前のスタイルを上書きするために、これを表すクラス セレクターを追加して重みを増やすことがあります。要素
以上がCSS での CLASS の定義にスペースを使用する場合とスペースを使用しない場合の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。