1

idこのようにCSSを「ネスト」するつもりでした

#content #caption { color: teal }
  ...

#footer #caption { margin: 2em 1em }

それがSASS（CSSジェネレーター）がネストを行う方法だからです...しかし、1つのHTMLドキュメントではid、同じ名前の2つのを持つことはできません。そうではないので、上記のネストは機能しないか、勝ちます。うまくいきません。（特に、要素を選択するためにdocument.getElementById（）または$（'＃caption'）または$（'caption'）が必要な場合）。

使用できます

#content #content_caption { color: teal }
  ...

#footer #footer_caption { margin: 2em 1em }

しかし、なぜもう1レベルのネストがあるのでしょうか。なぜだけではないのですか

#content_caption { color: teal }
  ...

#footer_caption { margin: 2em 1em }

？

4

4 に答える 4

4

「キャプション」という単語は、それが一意の識別子ではないことを示します。もしそうなら、私はキャプションをクラスとして宣言します。以下は完全に合法で有効です。

#content .caption { color: teal }
#footer .caption { margin: 2em 1em }
于 2010-06-14T20:20:02.923 に答える
1

その理由はありません。idは非常に重いセレクターなので、スタイリングルールを変更するだけで十分です。そうでない場合は、前に#contentを追加するか、勝っているルールのセレクターを変更してください。

于 2010-06-14T20:19:27.747 に答える
1

1つのページにid="caption"の要素が2つない場合は、まったく問題ありません。ただし、名前（コンテンツとフッター）から、id="caption"の値が複数あると推測されます。これは非常に悪いことです。idは一意でなければならないことを覚えておく必要があります！代わりに「クラス」を使用してください

#content .caption { }
#footer .caption { }
于 2010-06-14T20:23:00.687 に答える
1

まず、「キャプション」のようなものは、実際にはクラスのように聞こえます。

あなたはこう言います：これは**フッター（特定のID）ですが、これは** a **キャプション（一般クラス）です。

Sassでセレクターをネストする別の方法は次のとおりです。

.caption
  margin: 2em 1em
  font-weight: bold
  #footer &
    background: teal
  #content &
    background: red

（「＆」は、含まれているものをすべて参照します。）

于 2010-06-20T10:42:40.740 に答える