1

この種の css 宣言について説明してください。

.menu_blueSkin_Middle.dir_left div.align_left {
float: left;
 }

あなたが.someName{}を持っているかどうか私が知る限り、これはhtml要素のクラス属性に入れられていることを意味します。例えば：

 <div class='someName'></div>.

しかし、質問をもたらす例には 2 つの点があります。最初に 1 つ、中間に 1 つ。次に、スペースと別の宣言 div.align_left? があります。

説明をお願いします！

4

9 に答える 9

2

2 つのドットは 2 つのクラスを示します。これらの特定の CSS ルールは、要素に両方のクラスがある場合にのみ有効になります。

これらのクラスは両方とも、外側の div に存在する必要があります。

.menu_blueSkin_Middle .dir_left

内側のdivのクラスには、クラスを含むdivが含まれている必要があります（複数持つことができますが、少なくとも次のものがあります）：

.align_left

したがって、次のようになります。

<div class="menu_blueSkin_Middle dir_left"> <!-- Outer div class selectors -->
    <div class="align_left"></div> <!-- Inner div class selector -->
</div>
于 2013-03-20T22:59:38.790 に答える
1 
.menu_blueSkin_Middle.dir_left div.align_left

ここでは 3 つのクラスが呼び出されます。

これらのクラスに名前を付けた人は誰でもアマチュアであるため、少し複雑です。CSS コードと同じ名前をクラスに付けてはいけません。

わかりやすくするために、表示されている 3 つのクラスの名前を変更しましょう。

  • menu_blueSkin_Middle の名前を.firstclassに変更します
  • dir_left の名前を.secondclassに変更します
  • .align_leftを .thirdclass に名前を変更します

さて、3 つの名前が変更されたクラスを使用して、コードを示します。

.firstclass.secondclass div.thirdclass {
     float: left;
}

わかりましたので、以下が適用されます。

  • . thirdclass は影響を受ける唯一のものです [with float:left; コード]。
  • div 内の . thirdclass クラスのみが影響を受けます。(その前に div があるため)
  • .secondclass と .firstclass の両方の double 宣言を持つクラス内にある .thirdclass div のみが影響を受けます。

コード例:

<div class="firstclass secondclass">
    <p class="thirdclass">
    </p>
       <!-- NOTE: THIS IS JUST A NOTE SO YOU KNOW WHICH IS AFFECTED.
            The DIV below is the **only one affected**. The P above is NOT affected. Because it is not a DIV.
            The DIV at the bottom is NOT affected. Because it is not nested inside the firstclass secondclass 
       -->
    <div class="thirdclass">
    </div>
</div>
<div class="thirdclass">
</div>
于 2013-03-20T23:55:18.200 に答える
1

含まれているルールを、両方のクラスが割り当てられている要素に適用します。

これがサンプルです

<html>
  <style>
    .one { color: green; }
    .two { color:red; }
    .one.two { color:blue; }
  </style>
  <div class="one">I'll be Green</div>
  <div class="two">I'll be Red</div>
  <div class="one two">I'll be Blue</div>
</html>
于 2013-03-20T23:05:42.093 に答える
1

要素の属性には複数のクラス名を含めることができますclass。また、2 つのクラス名を組み合わせたセレクターは、セレクターと一致するために要素に両方のクラス名が必要であることを意味します。

セレクターは、たとえば、次のdivコードのインナーと一致します。

<div class="menu_blueSkin_Middle dir_left">
  <div class="align_left"></div>
</div>
于 2013-03-20T23:04:22.073 に答える
1

これは、ルールに一致するために要素が両方のクラスを持っている必要があることを意味します。

<div class="menu_blueSkin_Middle dir_left">
    <div class="align_left"></div>
</div>
于 2013-03-20T22:59:47.737 に答える
1

div.align_left は子孫セレクターです。これは、menu_blueskin_Middle.dor_left 要素にネストされている div.align_left の DOM 要素のみを適用 (選択) することを意味します。

于 2013-03-20T23:02:46.397 に答える
0

これは、ダブル クラス セレクターと呼ばれます。以下のように、両方のクラスを持つ要素に適用されます

<div class="menu_blueSkin_Middle dir_left">...</div>

.class1#identifier.class2.class3 などの任意の数の ID およびクラス セレクターに参加できます。

于 2013-03-20T23:06:43.927 に答える
0

何について多くの答えがありますが、なぜですか？

.menu_blueSkin_Middle.dir_left div.align_left {
float: left;
 }

より具体的にしたい場合があります（優先度が高く、2つのクラスを追加するとそれが可能になります（クラス間にスペースがありません）-ここでは、実際には複数あるため、このCSSが適用される可能性が高くなります.SOその複数を持つ要素クラスは特異性を獲得します。

「css selectors multiple classes」で google/bing を検索してみてください

于 2013-03-20T23:09:51.980 に答える
0 
.menu_blueSkin_Middle.dir_left div.align_left

意味

クラス menu_blueSkin_Middle およびクラス dir_left を持ち、クラス align_left を持つ div タグである子要素を持つ任意の要素

于 2013-03-20T23:01:27.207 に答える