28

私はCSSを学び始めたばかりで、完全には理解していない例に出くわしました。私はそれをうまく説明することができず、答えを見つけるのが難しくなりました（したがって、私が見落としていた答えがすでに存在する場合はお詫びします）。

私の質問は次の例に関するものです。

.theme-light.slider-wrapper {
  background: #fff;
  padding: 10px;
}

CSSのクラスは、次の.nameようなタグで使用できる構文を使用して定義されていることを理解しています。

<div class="name"></div>

.name1 .name2「double」宣言がどのように機能し、これがタグでどのように使用されるのかわかりません。

関連するメモで、私が与えられたサンプルWebサイトは、スタイルシートに存在しないタグのIDを使用しています。これは他にどこで定義できますか？

4

6 に答える 6

72

セレクターを使用するCSSでは、.className「className」クラスを使用してすべての要素のプロパティを定義できます。すべての要素がより多くのクラスを持つことができます。より多くのクラスを持つセレクターの意味は、宣言でそれらをどのように組み合わせるかによって異なります。

  • .class1.class2両方のクラスが定義されている要素のみに一致します。

    .class1.class2 { background: red; }
<div class="class1 class2"></div>

  • .class1, .class2要素を.class1または.class2と一致させます

    .class1, .class2 { background: yellow; }
<div class="class1"></div>
<div class="class2"></div>

  • .class1 .class2class1の要素内のclass2の要素のみと一致します。

    .class1 .class2 { background: blue; }
<div class="class1">
    <div class="class2"></div>
</div>
于 2012-11-18T21:32:46.247 に答える
43

たぶん、この使用例はあなたのために物事をクリアするでしょう。

次のシナリオを想像してみてください。

あなたは持っているでしょう：

<div class="general-div">some stuff</div>
<div class="general-div special">some stuff</div>
<div class="general-div">some stuff</div>
<div class="extra-div">some stuff</div>
<div class="extra-div special">some stuff</div>

そして、divに次と同じ属性を持たせたいとしましょう。

.general-div {width: 300px; height: 300px; border: 1px solid #000;}

.extra-div {width: 200px; height: 200px; border: 1px solid #666;}

ただし、.specialクラスの.general-divの背景を赤にし、.specialクラスのextra-divの背景を青にする必要があります。

あなたは書くでしょう：

.general-div.special {background-color: red;}

.extra-div.special {background-color: blue;}

問題の状況の使用が明確になることを願っています。

于 2012-11-18T21:20:28.103 に答える
1

.theme-light.slider-wrapper両方のクラスがあることを意味します。HTMLでは、次のようになります。

<div class="theme-light slider-wrapper"></div>

IDに関しては、HTMLのIDをCSSで参照する必要がある理由はありません。

于 2012-11-18T21:20:18.283 に答える
1

のようなダブルクラスの使い方は <div class="name1 name2"></div>？

divクラスを受講する必要がname1ありますname2（ライブデモを参照）。

どう .theme-light.slider-wrapperですか？

つまり、要素には theme-lightとslide-wrapperクラスの両方が必要です（ライブデモを参照）。

より多くの要素に適しています。一部の要素の背景を灰色にする必要があります。問題ない！それらにクラスを追加しgray、cssを定義します。

.gray {
   background: #ddd;
}

また、いくつかの要素に赤いテキストが必要です。red-textcssでクラスを定義します。

.red-text {
   color: red;
}

そして最後にあなたの段落は灰色の背景と赤いテキストを持っています。とこのようなクラスの両方grayを追加するだけです。red-text<p class="gray red-text">Lorem ipsum</p>

于 2012-11-18T21:38:04.230 に答える
1

ここにあなたの質問の詳細な説明があります。

色分けされたクラスの図

差出人：www.itsmesharath.in

于 2016-01-03T07:42:06.307 に答える
0

あなたが使用する必要があります

<div class="class1 class2">

オブジェクトに複数のクラスを適用します。

于 2012-11-18T21:20:17.503 に答える