CSSとjQuery：.name vs name ^ =（つまり、クラスとID配列） - jquery、html、css、jquery-selectors、css-selector

次の3つのシナリオを考えてみましょう。

（1）：

<div class="zones"></div>
<div class="zones"></div>
<div class="zones"></div>

vs（2）：

<div id="zone1"></div>
<div id="zone2"></div>
<div id="zone3"></div>

vs（3）：

<div id="zone1" class="zones"></div>
<div id="zone2" class="zones"></div>
<div id="zone3" class="zones"></div>

あなたはすべての <div> それに応じて .zones または div[id^=zone] セレクタ（CSSとjQueryの両方）

（2）以上（1）または（3）を使用する利点はありますか？

回答：

回答№1の場合は3

IDの目的は、素子。同様に、3つの要素を相互に関連付ける必要がない場合、それらの要素にそれぞれIDを付ける必要はありません。共通のクラス名。

IDとクラスの両方が必要なのでオプション3を使用する場合は、セレクタの違いを考慮する必要があります。

CSSでは、 .zones は あまり具体的でない より div[id^=zone] 欠落している型セレクタ（クラスセレクタとアトリビュートセレクタはそれ自身で等しく特定されます）。もちろん、両方のセレクタの特異性をバランスさせたい場合は、 div.zones の代わりに .zones.

クラスセレクタも通常最適化されているのでその結果、CSSとjQueryの両方で一致するのははるかに簡単です。結果の違いは重要ではありませんが、クラスごとに同じ要素を一致させることができれば、クラスセレクタを属性セレクタよりも使用しない理由はありませんしたがって、3つの要素をグループ化したり操作したりする場合は、クラス名を割り当ててそのクラスで選択します。

---

回答№2の場合は0

それは完全に状況に依存します。個人的には、これらのナノ秒を節約することに気をつけず、すべての開発者が理解できるように（より多くのクラスに基づいたidはjavascriptでより多く使用できます）

あなたは明らかにあなたのHTML全体をクラス、タグ、子+兄弟セレクタ,n番目の子供.

ほんの一例です：

.mainclass > .innerclass > a{
cloro:red;
}

あなたが割り当てても同じことができます id=something to a tag：

#something{
color:red;
}

クラスを使用する：複数のDOM要素が同じ特性を共有する場合のみ。

Idを使用する：異なるDOM要素が一意の特徴を共有する場合のみ。

しかし、最終的にはすべてが、より洗練された、簡単で分かりやすいコードを書くことになります。

---