193

これら 2 つの CSS クラスの構文の違いを教えてください。

.element .symbol {}

.element.large .symbol {}

2つの違いがわかりません。最初の行は、同じスタイルが適用される 2 つの異なるクラスを示しています。2つ目ですが、「.element」に付いて書かれている「.large」はどういう意味ですか?

4

5 に答える 5

313
.element .symbol

.symbol内部を意味します.element

.element.symbol

.elementクラスも持っていることを意味しsymbolます。

そう、

.element.large .symbol

.symbol内部.elementにもクラスがあることを意味largeします。

于 2012-04-05T21:20:56.457 に答える
172

最初の意味を少し誤解していると思います。

.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 セレクターのドキュメントへのリンクをリクエストしてください。

于 2012-04-05T21:29:49.647 に答える
36

使用する

.element.large

両方のクラスを持つ要素を参照します。

<div class="element large"></div>

要素の子孫ではなく:

.element .large

つまり、次のとおりです。

<div class="element">
    <div class="large"></div>
</div>

それだけ

<div class="large"></div>

スタイルを「受信」しています。

基本的に、スペースで区切られているということは、descendant関係を持つ 2 つの要素を意味します。

于 2012-04-05T21:24:28.050 に答える
11

.element .symbolこれは、別の要素の中に要素がある場合に使用します。例えば:

<div class="element">
    <i class="symbol"></i>
</div>

将来、いくつかの div を区別したい場合は、追加のクラスを追加して、異なるものだけをターゲットにし、それを でターゲットにすることができます.element.large .symbol。たとえば、次のようになります。

<div class="element large">
    <i class="symbol"></i>
</div>
于 2012-04-05T21:26:44.430 に答える
1

<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 要素」と言いますが、もちろん、これが適用される複数のテーブルを持つことができます。ご理解ください。)

于 2012-04-05T21:21:23.923 に答える