これら 2 つの CSS クラスの構文の違いを教えてください。
.element .symbol {}
と
.element.large .symbol {}
2つの違いがわかりません。最初の行は、同じスタイルが適用される 2 つの異なるクラスを示しています。2つ目ですが、「.element」に付いて書かれている「.large」はどういう意味ですか?
これら 2 つの CSS クラスの構文の違いを教えてください。
.element .symbol {}
と
.element.large .symbol {}
2つの違いがわかりません。最初の行は、同じスタイルが適用される 2 つの異なるクラスを示しています。2つ目ですが、「.element」に付いて書かれている「.large」はどういう意味ですか?
.element .symbol
.symbol
内部を意味します.element
.element.symbol
.element
クラスも持っていることを意味しsymbol
ます。
そう、
.element.large .symbol
.symbol
内部.element
にもクラスがあることを意味large
します。
最初の意味を少し誤解していると思います。
.element .symbol {}
.symbol
これらの CSS 設定は、 classを持つ要素内にあるclass を持つすべての HTML 要素に適用されることを意味します.element
。
<div class="element">
<div class="symbol" />
</div>
この例では、最初の CSS エントリが<div>
中央のタグに影響を与えます。
2番目の例は、最初のクラスが影響を受けるには2つのクラスが必要であることを意味します。それ以外は最初のものと同じです。
<div class="element large">
<div class="symbol" />
</div>
したがって、HTML がこのように見える場合、CSS 値は内部<div>
タグにも適用されます。
複数のクラスに個別に適用される CSS タグを設定する場合は、コンマを使用してそれらを分割する必要があります。したがって、次のようになります。
.element, .symbol {}
編集: CSS セレクターのドキュメントへのリンクをリクエストしてください。
使用する
.element.large
両方のクラスを持つ要素を参照します。
<div class="element large"></div>
要素の子孫ではなく:
.element .large
つまり、次のとおりです。
<div class="element">
<div class="large"></div>
</div>
それだけ
<div class="large"></div>
スタイルを「受信」しています。
基本的に、スペースで区切られているということは、descendant
関係を持つ 2 つの要素を意味します。
.element .symbol
これは、別の要素の中に要素がある場合に使用します。例えば:
<div class="element">
<i class="symbol"></i>
</div>
将来、いくつかの div を区別したい場合は、追加のクラスを追加して、異なるものだけをターゲットにし、それを でターゲットにすることができます.element.large .symbol
。たとえば、次のようになります。
<div class="element large">
<i class="symbol"></i>
</div>
<span class="element large">
2 番目の例では、セレクターの最初の部分は、 orのように 2 つのクラスを持つ単純な要素<span class="large element">
です。
一般に、セレクターの各部分は 1 つの HTML 要素に適用されます。
table[border].clname
は、border 属性と clname のクラスを持つテーブルを意味し、border 属性をtable [border] .clname
持つ要素内の、クラス clname を持つテーブルの要素を意味します。
(編集: 「1 つの HTML 要素」と言いますが、もちろん、これが適用される複数のテーブルを持つことができます。ご理解ください。)