CSS での CLASS の定義にスペースを使用する場合とスペースを使用しない場合の違いは何ですか?-CSSチュートリアル-php.cn

CSS での CLASS の定義にスペースを使用する場合とスペースを使用しない場合の違いは何ですか?

黄舟

リリース： 2017-07-22 09:42:04

オリジナル

2754 人が閲覧しました

.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 サイトの他の関連記事を参照してください。