183 
#main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div id="main">
    Welcome
</div>

ここではid、div要素に を指定し、関連する CSS を適用しています。

また

.main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div class="main">
    Welcome
</div>

ここで私は に を与えましたclassがdiv、それも私のために同じ仕事をしています。

Idとclassの正確な違いは何ですか?idまた、いつ使用する必要がありclassますか? 私は CSS と Web デザインの初心者で、これに対処する際に少し混乱しています。

4

15 に答える 15

235

  • ページ/サイト全体で複数の要素を一貫してスタイルする場合は、クラスを使用します。クラスは、同じスタイルを共有する複数の要素がある場合、または将来ある可能性がある場合に役立ちます。例としては、「コメント」の div や、関連するリンクに使用する特定のリスト スタイルがあります。

    さらに、特定の要素には複数のクラスを関連付けることができますが、要素は 1 つの ID しか持つことができません。たとえば、両方のスタイルが有効になる 2 つのクラスを div に指定できます。

    さらに、クラスは、視覚的なスタイルに加えて、動作スタイルを定義するためによく使用されることに注意してください。たとえば、jQuery フォーム バリデータ プラグインは、クラスを多用して要素の検証動作を定義します (たとえば、必須かどうか、または入力形式のタイプを定義します)。

    Examples of class names are: tag, comment, toolbar-button, warning-message, or email.

  • Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.

    Examples of ids are: main-content, header, footer, or left-sidebar.

A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.

于 2012-10-15T04:45:21.700 に答える
71

idは一意です

  • 各要素は 1 つのみ持つことができますid
  • 各ページには、その要素を 1 つだけ含めることができますid

classes は一意ではありません

  • class複数の要素で同じものを使用できます。
  • 同じ要素で複数のclasses を使用できます。

Javascript が気になる

classJavaScript のユーザーは、おそらくes とids の違いに慣れているでしょう。JavaScript は、特定idのgetElementById.

于 2012-10-15T04:44:20.893 に答える
16

詳細については、ここをクリックしてください。

例 

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(CSS は、ID にはプレフィックス#を使用し、クラスには . を使用することに注意してください。)

ただし color、HTML 4.01 の<font>タグ属性は HTML 5 で廃止されました。CSS には「font-color」がありません。スタイルはcolor次のとおりです。

例 

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}

テキストは白になります。

于 2012-10-15T04:42:26.983 に答える
10

ID は一意である必要があります。HTML ドキュメント内に同じ ID を持つ要素を複数含めることはできません。クラスは複数の要素に使用できます。この場合、「メイン」の ID を使用する必要があります。これは (おそらく) 一意であるためです。これは、他のコンテンツのコンテナーとして機能する「メイン」div であり、1 つしかありません。

スタイリングを繰り返したいメニューボタンやその他の要素がたくさんある場合は、それらすべてを同じクラスに割り当ててから、そのクラスのスタイルを設定します。

于 2012-10-15T04:40:40.087 に答える
5

ほとんどの人が言っているように、1 回限りの要素には ID を使用し、複数の使用要素にはクラスを使用します。

これは簡単で単純化された例で、HTML と HEAD タグを読み取り済みとして取得します

<body>
    <div id="leftCol">
        You will only have one left column
    </div>
    <div id="mainContent">
        Only one main content container, but.....
        <p class="prettyPara">You might want more than one pretty paragraph</p>
        <p>This one is boring and unstyled</p>
        <p class="prettyPara">See I told you, you might need another!</p>
    </div>
    <div id="footer">
        Not very HTML5 but you'll likely only have one of these too.
    </div>
</body>

また、他の回答で述べたように、ID は JavaScript によくさらされていますが、クラスはそうではありません。ただし、jQueryなどの最新の JavaScript フレームワークは、javascript のクラスも活用します。

于 2012-10-15T04:52:19.430 に答える
4

ID には、Web ページ内の特定のセクションへのリンクとして機能する機能があります。# タグの後のキーワードは、ウェブページの特定のセクションに移動します。たとえば、ページのチャプター 5 セクションに「section5」ID がラップされている場合、アドレス バーの「 http://exampleurl.com#chapter5 」はそこに移動します。

于 2014-07-08T17:22:39.667 に答える
2

属性は複数の HTML 要素/タグで使用でき、classすべてが有効になります。は単一idの要素/タグを意味し、一意と見なされます。

さらに、idは よりも高い特異性値を持っていclassます。

于 2012-10-15T04:40:41.300 に答える
2

ID:

ページ全体の固有の要素を識別します。同じ ID で他の要素を宣言しないでください。id セレクターは、単一の一意の要素のスタイルを指定するために使用されます。id セレクターは HTML 要素の id 属性を使用し、「#」で定義されます。

クラス：

クラス セレクターは、要素のグループのスタイルを指定するために使用されます。id セレクターとは異なり、class セレクターは複数の要素で最もよく使用されます。

これにより、同じクラスを持つ多くの HTML 要素に特定のスタイルを設定できます。

クラス セレクターは HTML クラス属性を使用し、「.」で定義されます。

于 2012-10-15T04:43:38.943 に答える
1

これを見る簡単な方法は、id が 1 つの要素だけに固有であることです。

クラスは一意ではなく、複数の要素に適用されます。

例えば：

<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>

「veryImportant」は一度だけ使用され、二度と使用されない他のタグにも適用される可能性があるため、コンテンツはクラスです。

于 2012-10-15T04:51:36.983 に答える
1

class多くの要素にを割り当てることができます。class要素に複数を割り当てることもできます。

<button class="btn span4" ..>

ブートストラップで。idを 1 つにのみ割り当てることができます。したがって、多くの要素を同じように見せたい場合は、次のようになります。リスト項目、あなたが選択しますclass。JavaScript を使用して要素に対して特定のアクションをトリガーする場合は、おそらくid.

于 2012-10-15T04:40:48.617 に答える
1

クラスは複数回使用できますが、ID は 1 回しか使用できないため、頻繁に使用することがわかっているアイテムにはクラスを使用する必要があります。たとえば、Web ページのすべての段落に同じスタイルを適用する場合は、クラスを使用します。

標準では、特定の ID 名はページまたはドキュメント内で 1 回だけ参照できると規定されています。ページごとに 1 回しか出現しない場合は、ID を使用します。ページごとに 1 つ以上のオカレンスがある場合は、クラスを使用します。

于 2012-10-15T04:41:09.773 に答える
1

これは非常に理解しやすいです:-

id は、CSS プロパティを 1 つの属性のみに適用する必要がある場合に使用されます。

クラスは、同じページ内または異なるページ内の多くの場所で CSS プロパティを使用する必要がある場合に使用されます。

一般 :- div やボタンのレイアウトを見つめるなどの独自の構造には、 id を使用します。

クラスを使用するページまたはプロジェクト全体で同じ CSS の場合

id は軽く、class は少し重い

于 2012-10-15T04:44:22.863 に答える
-4

id セレクターは、より多くの要素に使用できます。例は次のとおりです。

CSS:

#t_color{
    color: red;
}
#f_style{
    font-family: arial;
    font-size: 20px;
}

html:

<p id="t_color"> test only </p>
<div id="t_color">the box text</div>

Internet Explorer (ver. 11.0) と Chrome (ver.47.0) でテストしました。それはそれらの両方で機能します。

「一意」とは、1 つの要素がクラス セレクターのように複数の id 属性を持つことができないことを意味するだけです。ない

<p id="t_color f_style">...</p>

または

<p id="t_color" id="f_style">...</p>
于 2015-12-22T22:22:29.887 に答える