2

ID を使用して要素のスタイルを設定するのは悪い習慣ですか、それとも適切な css を参照するすべての要素のスタイルを設定する必要がありますか?

<div id="test">
</div>

対 ：

<div id="test" class="testClass">
</div>

#test{
color:blue;
}

.testClass {
color:blue
}
4

7 に答える 7

5

それは悪い習慣でも良い習慣でもありません。セレクターの目的は とはid異なりclassます。

この 1 つの要素のみにスタイルを設定し、他の場所でスタイルを再利用しないことを計画している場合idは、選択します。div同じスタイルにするために類似した多くの -sが必要な場合は、使用しますclass

于 2012-07-27T10:59:59.077 に答える
2

ID とクラス

ID #

ID はドキュメント内で一意である必要があり、多くの場合、document.getElementById を使用して要素を取得するために使用されます。

一部のドキュメント (特に HTML、XUL、および SVG) では、要素の id を次のように要素の属性として指定できます。

ただし、DOCTYPE で id 属性のタイプを正しく指定しないと、カスタム XML ドキュメントでこの属性を使用することはできません。

id のその他の一般的な使用法には、CSS でドキュメントをスタイル設定するときに要素の ID をセレクターとして使用することが含まれます。

ID では大文字と小文字が区別されますが、大文字と小文字のみが異なる ID を作成しないでください (クラスおよび ID 名での大文字と小文字の区別を参照してください)。

クラス .

クラス名またはクラス名のセットを要素に割り当てます。同じクラス名または複数の名前を任意の数の要素に割り当てることができます。複数のクラス名を指定する場合は、空白文字で区切る必要があります。

要素のクラス名には、次の 2 つの重要な役割があります。

スタイル シート セレクターとして、作成者が一連の要素にスタイル情報を割り当てたい場合に使用します。ブラウザによる一般的な使用。このクラスは、CSS を使用して SVG コンテンツのスタイルを設定するために使用できます。

于 2012-07-27T11:01:01.207 に答える
1

ID は基本的にクラスと同じものです。ID は少し高速ですが、1 つの要素でのみ使用する必要がありますが、クラスは多くの要素で使用できます。

于 2012-07-27T10:56:30.493 に答える
0

複数の要素の色を青にしたい場合は、クラスを使用する必要があります。それ以外の場合は、IDで問題ありません。

于 2012-07-27T10:58:01.847 に答える
0

ID や Class をスタイルで使用すると、大きな違いが生じるとは思いません。クラス セレクターは、要素のグループのスタイルを指定するために使用されます。id セレクターとは異なり、class セレクターは複数の要素で最も頻繁に使用されます。

詳細については、このリンクを参照してください

http://css-tricks.com/the-difference-between-id-and-class/

JavaScript では、ID が重要な役割を果たします。ID を使用して DOM 要素を検索した場合、JavaScript パーサーがそれぞれのページでその ID を持つ最初の要素の値を返すため、検索が高速になります。クラスを使用した場合、JSはページ全体を検索し、そのクラスのすべての要素を収集します。このため、検索が少し遅くなります。

于 2012-07-27T11:07:33.920 に答える
0

ID は一意です。ページには、その ID を持つ要素が 1 つだけ存在する必要があります。スタイリングに関しては、それ自体が悪い習慣だとは思いませんが、特異性の点では ID が勝っています。基本的に、セレクターが具体的であるほど、競合するスタイルに関してより優先されるため、ID に適用されたスタイルは他のスタイルをオーバーライドします。

p has a specificity of 1 (1 HTML selector)
div p has a specificity of 2 (2 HTML selectors; 1+1)
.tree has a specificity of 10 (1 class selector)
div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
#baobab has a specificity of 100 (1 id selector)
body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)
于 2012-07-27T11:00:42.970 に答える
0

悪い習慣ではありませんが、使い方次第です。

ページの各要素にいくつかのルールを設定すると、何が起こっているのかすぐに理解できなくなり、css が非常に長いファイルになります。

クラスを定義すると、同じ一連のルールを複数の要素で使用できるようになるため、そのような動作を許可するようにページを設計する必要があります。

通常、戦略を組み合わせる必要があります。たとえば、ヘッダー、フッター、本文など、ページの「重要な」要素の id を使用してスタイルを設定し、他の部分またはコンポーネントを整列させることができます。クラスを使用しています。

于 2012-07-27T11:04:29.710 に答える