0

だから私はHTMLクラスとIDの違いを理解しています。ただし、この特定の状況でそれぞれを使用する方法について少し問題があります。

約 25 個の div 要素があります (5 列、それぞれに 5 つの内部 div があります)。それぞれに一貫したスタイルを使用したいので、CSS にはクラスを使用しました。問題は、JQueryとJavascriptを使用しているため、特定のdivをそれぞれ識別できるようにする必要がある場合ですが、それぞれに固有のCSSスタイルを作成する必要があるため、クラスとIDの両方を使用することはできません.クラスをまとめて使用する目的。

私が取り組んでいるHTMLコードは次のとおりです。

<div class="ts8-10" id="dfwef">
<ul>
    <li>Jans Smith</li>
    <li><a href="#">Open Time</a></li>
</ul>
</div>

この質問は少し主観的かもしれませんが、id を使用して各要素を識別しながら、クラスを使用する利点 (複数の要素をスタイルできる) を維持する方法を理解しようとしています。

ID をクラスに追加すると、クラスが提供するすべてのスタイルが失われました。CSS を使用できることはわかってい.ts8-10#aaますが、25 要素ごとにそれを行う必要があります。

助言がありますか？

編集：

必要な場合の CSS は次のとおりです。

    .ts8-10, .ts10-12, .ts12-2, .ts2-4, .ts4-6
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    width:95%;
    height:15%;
    font-size: 28px; 
    text-align: center;
    padding:5px;
    margin-top: 5px;    
}
4

6 に答える 6

0

ID はクラスよりも特異性が高い

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

たとえば、次の CSS ルールを使用できます。

.ts8-10, .ts10-12, .ts12-2, .ts2-4, .ts4-6
{
  border-style: solid;
  border-width: 1px;
  border-color: black; 
  width:95%;
  height:15%;
  font-size: 28px; 
  text-align: center;
  padding:5px;
  margin-top: 5px;    
}

これらはすべて .truck の最初の子であるため、これを次のように変更します。

.truck > div
{
  border-style: solid;
  border-width: 1px;
  border-color: black; 
  width:95%;
  height:15%;
  font-size: 28px; 
  text-align: center;
  padding:5px;
  margin-top: 5px;    
}

大なり記号 (>) は、基本的に .truck の最初の子を検索します。

基本的に同じコンテンツブロックを列で繰り返しているため、タグをターゲットにすることもできます

于 2013-11-07T20:11:56.087 に答える
0

クラス = 複数回使用する予定のスタイル。

ID = 1 回だけ識別または使用される div (1 回だけ存在するものに対して ID を使用する場合と、一意性に基づく JavaScript 機能を使用する場合の設計上の好みに応じて) は 1 回だけです。

次のようなことができます<input type="text" class="form_textbox" id="FORM_name" name="name">

ロジック:

  • このフォームのテキストボックスはすべて同じスタイルであるため、クラスを使用してください

  • JS/jQ フォーム処理の目的で ID を使用して一意に識別する

もう少し理にかなっています..？

于 2013-11-07T20:05:12.343 に答える