-7 
<div id="full-width">
<div id="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div id="full-width">
<div id="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div id="wrap"><!--contents with fixed width:: 950px--></div>

<div id="wrap"><!--contents with fixed width:: 950px--></div>

<div id="full-width"><!--contents with full width:: 100%--></div>

重要な質問

これは問題なく動作しますが、多くのコーダーや言う CSS ルールでは、同じ ID を複数回使用しないように指示されています。では、どうすればマークアップを配置できるでしょうか? そして、機能しないこれよりも多くない1つのIDのみを使用する必要があることについて、誰かが説明できますか?

4

7 に答える 7

6

前に言ったようにid、一意の識別子であるタグを使用しています。class複数の要素にスタイルを適用するには、 a を使用する必要があります。

W3C の定義を参照してくださいid: ( http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 )

要素識別子: id および class 属性

属性の定義

id = name [CS] この属性は、要素に名前を割り当てます。この名前はドキュメント内で一意である必要があります。

class = cdata-list [CS] この属性は、クラス名またはクラス名のセットを要素に割り当てます。任意の数の要素に同じクラス名を割り当てることができます。複数のクラス名は空白文字で区切る必要があります。

さらに興味深いのは、あなたの例が機能し、ほとんどのブラウザーで機能すると述べたことです。一部のブラウザは開発者の欠点を見つけて、標準に準拠していないかのように非標準準拠のコードをレンダリングするだけです。

これは決してうまくいかない例です。ご存知かもしれませんがid、タグは名前付きアンカーに使用できます。例えば

<a href="#content">Jump to content</a>
<div id="content">
  some content
</div>
<div id="content">
  some other content
</div>

この例では、名前付きアンカーはどの要素にリンクする必要がありますか? ほとんどの場合、最初の要素に行くと思います。ただし、これは開発者が望んでいたものではない可能性があります。

id要素には、要素にスタイルを適用するだけでなく、さらに多くの用途があります。W3C は次のように述べています。

id 属性には、HTML でいくつかの役割があります。

  • スタイルシートセレクターとして。
  • ハイパーテキスト リンクのターゲット アンカーとして。
  • スクリプトから特定の要素を参照する手段として。
  • 宣言された OBJECT 要素の名前として。
  • ユーザー エージェントによる一般的な目的の処理 (たとえば、HTML ページからデータベースにデータを抽出する際のフィールドの識別、HTML ドキュメントの他の形式への変換など)。
  • 一方、class 属性は、1 つ以上のクラス名を要素に割り当てます。要素はこれらのクラスに属していると言えます。クラス名は、複数の要素インスタンスで共有される場合があります。

class 属性には、HTML でいくつかの役割があります。

  • スタイル シート セレクターとして (作成者が一連の要素にスタイル情報を割り当てたい場合)。
  • ユーザーエージェントによる汎用処理用。

標準に準拠したコードを作成して、標準に準拠したブラウザーで機能することを確認する必要があります。結果は、より広い範囲のブラウザーではるかに予測可能で安定しており、将来のバージョンで動作する可能性が高くなります.

編集：OPのコメントに応じて：

CSS:

.content {
    width: 950px;
    margin: auto; // Assuming you want to centre this
}

クラスを適用するものは何でも.content、幅は 950px になります。#top要素はブロック レベルの div であり、自然に 100% 幅に拡張されるため、要素に 100% 幅を設定する必要はありません。

HTML:

<div id="top">
    <div id="navigation" class="content">
    </div>
</div>

<div id="main" class="content">
</div>

<div id="footer" class="content">
</div>
于 2013-03-22T09:15:58.627 に答える
4

ID は一意の識別子であるため、ドキュメントごとに 1 つだけ存在する必要があります(それ以外の場合は一意ではありません)。

ID セレクターの代わりにクラス セレクターを使用するように、CSS を置き換えidて変更します。class

したがって、代わりに：

#full-width { ... }
#wrap { ... }

使用する：

.full-width { ... }
.wrap { ... }

わかりやすくするために、マークアップは次のようになります。

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="full-width"><!--contents with full width:: 100%--></div>
于 2013-03-22T09:01:19.843 に答える
1

IDsページ上の個々の要素を一意に識別する一意の識別子です。

複数の要素をすべて相互に関連付けたいこの状況では、http://www.w3.org/TR/html5/dom.html#classesclassesを使用します。

.次に、ではなく#次を使用してスタイルを設定します。

<div class="full-width">
   <div class="wrap">...</div>
</div>

div.full-width {
    width:100%;
    ...
}

div.wrap {
    width:950px;
    ...
}

どうもありがとうございました！使いやすさを考えて1つの容器で使いたいのですが、使い方は？

達成したいことに応じて、すべての.wrap要素を 1 つの.full-widthコンテナー内にラップするだけです。

<div class="full-width">
    <div class="wrap">...</div>
    <div class="wrap">...</div>
    <div class="wrap">...</div>
    <div class="wrap">...</div>
</div>

.wrapまたは、1 つの要素だけを使用することもできます。

<div class="full-width">
    <div class="wrap">
        ...
    </div>
</div>

.wrap仕切りを水平方向に中央揃えにすることも必要だと思います。

div.wrap {
    width:950px;
    margin:0 auto;
}

JSFiddle の例。

于 2013-03-22T09:04:09.223 に答える
1

IDYa コーダーは、一意でなければならないため、同じものを複数回定義することはできないと言っていますID。

class代わりに使用できますID

これを試して

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="full-width">
<div class="wrap><!--contents with fixed width:: 950px--></div>
</div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="wrap"><!--contents with fixed width:: 950px--></div>

<div class="full-width"><!--contents with full width:: 100%--></div>
于 2013-03-22T09:01:41.860 に答える
1

IDは、ページ内の要素を一意に識別します。ブラウザーはある程度のエラー回復を実行しますが<label for...>、JavaScript を使用して ID に基づいて DOM から要素を取得し始めると、確実に問題が発生します。

クラスは、グループの一部であるマークアップ要素に提供されます。代わりにそれらを使用してください。

<someElement class="one_class another_class">

.one_class {
    /* ... */
}
于 2013-03-22T09:02:08.157 に答える
0

間違ったDOM の ID で繰り返して<div id="full-width"><div id="wrap>います。

使用クラス<div class="full-width"><div class="wrap>

css下記までお申し込みclassください。

.full-width { /** css code **/ }
.full-width .wrap { /** css code **/ }
.wrap { /** css code **/ }
于 2013-03-22T09:01:44.673 に答える
0

複数のオブジェクトに同じスタイルを適用する場合は、class 属性を使用する必要があります。複数のオブジェクトで同じ id 属性を使用すると、特定のオブジェクトにその id でアクセスできません (eg によってアクセスされると想定されているためgetElementById()) 。

于 2013-03-22T09:02:37.720 に答える