2

私はCSS：ClassとIDを調べていました。そして、彼らが与えた例を試してみたとき、私はそれらの間に違いを感じませんでした。

<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
} 
</style>
</head>

<body>
<h1 id ="para1">Hai</h1>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

idセレクターは、単一の一意の要素のスタイルを指定するために使用されます。

私はこれを間違った角度で見ていますか？

4

8 に答える 8

7

1 つは一意に識別し、もう1 つは分類します。

前者の場合、2 つのものを同じものと呼ぶのはナンセンスです。

2 番目のケースでは、物事のグループに同じルック アンド フィールを与えたいと考えるのが一般的です。

CSS のコンテキストでは、クラスのみに依存する必要があります。CSS のバリデーターは、スタイルを適用するために ID を使用することに躊躇する必要があります。1 つの異なる要素のみで使用される一意のスタイルを定義することもできます。

于 2013-03-12T08:44:30.913 に答える
6

まず第一に、w3schoolsはひどいリソースです。それはひどく書かれていて、散らかっていて、焦点が合っておらず、しばしば誤解を招くものです。代わりに、Mozilla Developer Networkでこのはるかに優れたリソースのセットを使用する必要があります（同じことを達成するために着手します）。

あなたの例では、クラスをまったく使用していません。IDを呼び出すCSSと、そのIDを持つ2つのHTML要素があります（これは実行しないでください。IDは一意である必要があります）。2の主な違い：

  1. IDは一意の要素を参照します。1つのIDのインスタンスは1つだけである必要があります。クラスは多くの要素に適用でき、要素は複数のclassesを持つことができます
  2. IDを使用するCSSルールは、両方が同じプロパティを割り当てようとすると、クラスでCSSルールをオーバーライドします。
  3. IDは、アンカー参照、フォーム、iframeなど、あらゆる種類のネイティブアプリケーションに使用されますが、クラスは、CSSを使用したスタイル設定にのみ使用されます。

これらのポイントの例として、コードを変更しました。参照用のクラスを使用したコードの一部を次に示します。

.paragraph {
    font-style: italic;
    color: green;
}

そしてHTML：

<p id="para1" class="paragraph">Blah blah blah</p>
于 2013-03-12T08:51:37.270 に答える
1

ここに詳細な説明があります。

ページ/サイト全体で複数の要素を一貫してスタイルする場合は、クラスを使用します。ページ上にスタイルを使用する要素が 1 つある場合は、 IDを使用します。classはアイテムのタイプで、idはアイテムの一意の名前です。

編集：

CSSは気にしない

に関してCSSは、 でできて でIDできないことはなくClass、その逆もありません。私が最初に学習CSSしたとき、問題を抱えていたときのことを覚えています。時々、これらの値を切り替えてトラブルシューティングを試みていました。いいえ。CSS気にしません。

Javascript が気になる

JavaScript人々は、おそらく と の違いにもっと慣れ親しんでいclassesますID's。JavaScript は、特定のページ要素が 1 つしかないことに依存します。そうしないと、一般的に使用されるgetElementById関数が信頼できなくなります。に慣れている人は、ページ要素のjQuery追加と削除がいかに簡単かを知っています。classesこれは、ネイティブの組み込み関数ですjQuery。にはそのような関数が存在しないことに注意してくださいID's。これらの値を操作することは、 の責任ではありません。そのJavaScript価値よりも多くの問題を引き起こす可能性があります。

ドキュメントは、HTML がページ内でID属性を一意にする必要があることを明確に示しています。

この属性は、要素に名前を割り当てます。この名前はドキュメント内で一意である必要があります。同じIDを持つ複数の要素がある場合、HTMLは有効ではありません。

したがって、JavaScriptではgetElementById()1 つの要素のみを返す必要があります。複数の要素を返すようにすることはできません。

同じ ID の要素を複数持つことはできますが、そうすべきではありません。ブラウザ間の違いにより、結果が予測できないためです。

于 2015-02-05T07:42:23.827 に答える
1

両方を使用して要素のスタイルを設定できますが、いくつかの違いがあります。

  • 指定された ID を持つ要素は 1 つだけですが、指定されたクラスを持つ要素は多数あります
  • クラス セレクターが 10 しかない場合、ID セレクターは CSS の優先順位の計算中に 100 としてカウントされます。
于 2013-03-12T08:45:24.920 に答える
0

クラス セレクターは名前の前にピリオド (".") が付き、ID セレクターは名前の前にハッシュ文字 ("#") が付きます。ID とクラスの違いは、ID は 1 つの要素を識別するために使用できるのに対し、クラスは複数の要素を識別するために使用できることです。

css は ID の一意性をあまり気にしないかもしれませんが、JavaScript はそうします。そのため、JavaScript でドキュメント オブジェクト モデルを扱う場合、html ID を選択するには、document.getElementByID() を使用します。「要素」に注意してください。 "、クラスの場合は document.getElementsByClassName() を使用しますが、これには "Elements" があります。

于 2019-09-22T01:14:53.703 に答える
0

ID は要素に対して一意であり、要素には 1 つの ID しか存在できません。クラスは多くの要素に適用でき、要素は同時に複数のクラスを持つことができます

于 2019-09-22T02:40:56.560 に答える