1

要素にクラスを追加し、クラス セレクターを使用してスタイルを設定する必要があるのはいつですか? また、代わりに親にクラス/ID を追加して要素をそのまま使用する必要があるのはいつですか?

例：

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

.warning-dialog {}
.warning-dialog h3 {}
.warning-dialog p {}

対。 

<div class="warning-dialog">
    <h3 class="warning-title">This is the title</h3>
    <p class="warning-message">This is the message</p>
</div>

.warning-dialog {}
.warning-title {}
.warning-message {}

それともやるべきか

.warning-dialog .warning-dialog {}
.warning-dialog .warning-title {}
.warning-dialog .warning-message {}
4

6 に答える 6

7

この簡単な質問を自問してください。

<x>この共通の祖先の下にあるすべての要素は同じことを意味しますか？

その答えが「はい」の場合、これらの要素にクラス名は必要ありません。コードを例にとると、次のようになります。

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

の内部では.warning-dialog、すべてのh3要素（1）とすべてのp要素（1）が同じ意味になるため、ダイアログのタイトルと内容が同じになります。つまり、特定のクラス名を付ける必要はなく、.warning-dialog h3またはを介して簡単にアクセスできます.warning-dialog p。

ただし、上記の質問に対する答えが「いいえ」の場合、それはまったく別の話です。

<div>Warning</div>
<div>Info</div>
<div>Error</div>

CSSで各divを（簡単に）指定することはできません。すべてが同じことを意味するわけではないので、クラス名を使用して改善する必要があります。

<div class="warning-dialog">Warning</div>
<div class="info-dialog">Info</div>
<div class="error-dialog">Error</div>
于 2012-04-20T17:38:39.893 に答える
1

それは、スタイリングがどの程度柔軟であるかによって異なります。CSS を親タグに添付すると、親の下にあるすべての同様のタグが同じスタイルを持つことになります。それらのいくつかが異なる必要がある/異なる可能性がある場合は、それらを具体的に設定する方法が必要になります。

<div class="foo">
    <div>stuff</div>
    <div>other stuff</div>
</div>

この場合、"stuff" と "other stuff" は同じスタイルでなければなりません ( nth-childand stuff で遊んでいない限り)。

于 2012-04-20T17:33:48.100 に答える
1

技術的には、両方の例で out クラスを使用できません。違いを生むのは、実際には親コンテナだけです。例えば....

1 つのページに複数のエラー コンテナーを配置する場合は、次のようにすることができます。

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

.warning-dialog {
/*css for container*/
}

.warning-dialog h3 {
/*css for all h3 tags in that container*/
}

.warning-dialog p {
/*css for all p tags in that container */
}

そのコンテナをページで 1 回だけ使用する場合は、これを行うことができます。

<div id="warning-dialog">
        <h3>This is the title</h3>
        <p>This is the message</p>
    </div>

    #warning-dialog {
    /*css for container*/
    }

    #warning-dialog h3 {
    /*css for all h3 tags in that container*/
    }

    #warning-dialog p {
    /*css for all p tags in that container */
    }

また、同じコンテナーを使用するが、コンテナーの 1 つでヘッダー タグのスタイルを変える場合は、おそらく p タグでクラスを使用したいと思うでしょう。たとえば...

<div class="warning-dialog">
        <h3 class="option2">This is the title</h3>
        <p>This is the message</p>
    </div>

    .warning-dialog {
    /*css for container*/
    }

    .warning-dialog h3 {
    /*css for all h3 tags in that container*/
    }

    .warning-dialog p {
    /*css for all p tags in that container */
    }

    .warning-dialog .option2 {
    /*css for option 2*/
    }

ただし、これらの間で CSS が競合するため、これが常に最も実用的なアプローチであるとは限りません...そして !important を使用する必要があります。

.warning-dialog p {
    /*css for all p tags in that container */
    }

    .warning-dialog .option2 {
    /*css for option 2*/
    }

したがって、代わりに、親要素に異なる ID を使用するのがおそらく最善です。IE(エラーメッセージ1とエラーメッセージ2) ...

しかし実際には、すべてはプロジェクトのコンテキストに依存します。

于 2012-04-20T18:00:11.237 に答える
0

それは主に個人的な好みの問題です。私は自分の HTML をできるだけきれいに保つことを好むので、これを好むでしょう

.warning-dialog {}
.warning-dialog h3 {}
.warning-dialog p {}

また、要素に JavaScript でアクセスする必要がある場合は、クラスの代わりに ID を使用する方が簡単/高速ですが、ページ内でその要素を 1 回だけ使用するようにする必要があります。

于 2012-04-20T17:34:16.040 に答える
0

  それはあなたの好みと個人的な好みによります。ただし、一部の人が指摘しているように、すべての子タグ (div などの特定のタイプ) に同じスタイルが必要な場合は、それらのクラスを作成する必要はありません。タグ名を使用するだけです。同じスタイルを必要とするものとそうでないものがある場合は、それを必要とする (または必要としない) クラスにクラスを適用し、それに応じてスタイルを設定します。
  近い将来にコンテンツが変更される可能性があり、新しいコンテンツに異なるスタイルが必要になると思われる場合は、新しいタグの作成時にクラスを追加できます。
   ポイントは、それを行うための定義された標準的な方法がないということです。

于 2012-04-20T17:59:31.613 に答える
0

基本コンセプトは、

  1. スタイルを設定する一意の要素、使用id
  2. スタイルを設定する類似要素のコレクション。 を使用しますclass。
于 2012-04-20T17:30:23.323 に答える