250

#要素の一連のスタイルを宣言するときと、スタイルのセットを宣言するときの違いは何ですか?.また、どちらを使用するかを決定するときに作用するセマンティクスは何ですか?

4

9 に答える 9

373

はい、違います...

#一意の ID を持つ単一の特定の要素をターゲットにするために使用されるIDセレクターですが、. 特定のクラスを持つ複数の要素をターゲットにするために使用されるクラスセレクターです。別の言い方をすれば:

  • #foo {}属性で宣言された単一の要素をスタイルしますid="foo"
  • .foo {}属性を使用してすべての要素をスタイルしますclass="foo"（要素に複数のクラスを割り当てることもできます。スペースで区切るだけですclass="foo bar"）

典型的な用途

一般的に言えば、サイドバーやバナー領域などの高レベルのレイアウト div など、1 回しか表示されないことがわかっているもののスタイリングには # を使用します。

クラスは、スタイルが繰り返される場所で使用されます。たとえば、エラー メッセージ用の特別な形式のヘッダーを作成するとh1.error {}します。<h1 class="error">

特異性

セレクターが異なるもう 1 つの側面は、その特異性にあります。ID セレクターは、クラス セレクターよりも具体的であると見なされます。これは、要素でスタイルが競合する場合、より具体的なセレクターで定義されたスタイルが、より具体的でないセレクターをオーバーライドすることを意味します。たとえば、競合するルールを上書きする<div id="sidebar" class="box">ためのルールがあるとします。#sidebar.box

CSS セレクターの詳細

CSS セレクターのより優れた入門書については、 Selectutorialを参照してください。それらは信じられないほど強力であり、「# は DIV に使用される」という単純な概念である場合は、CSS をより効果的に使用する方法を正確に読むことをお勧めします。

編集: Selectutorial は空の大きな Web サイトに移動したように見えるので、代わりにこのアーカイブ リンクを試してください。

于 2009-03-02T12:38:13.940 に答える
32

は、要素のと#一致することを意味します。idは.クラス名を示します。

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

HTML ドキュメントでは、id 属性は一意でなければならないことに注意してください。そのため、特定のスタイルを必要とする要素が複数ある場合は、クラス名を使用する必要があります。

于 2009-03-02T12:40:09.287 に答える
10

ドット ( .) はクラス名を表し、ハッシュ ( ) は特定のid属性#を持つ要素を表します。クラスはその特定のクラスで装飾されたすべての要素に適用されますが、 # スタイルはその特定の ID を持つ要素にのみ適用されます。

クラス名：

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

名前付き要素:

<style>
   #name { ... }
</style>

<div id="name"></div>
于 2009-03-02T12:38:00.633 に答える
7

すでに言われていることのいくつかの簡単な拡張...

は一意であるid必要がありますが、同じ ID を使用して異なるスタイルをより具体的にすることができます。

たとえば、次の HTML の抜粋があるとします。

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

これらを使用してさまざまなスタイルを適用できます。

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }


知っておくと便利なもう 1 つのこと: スペースで区切ることにより、要素に複数のクラスを設定できます...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

これにより、 と を使用し.menuて特定のスタイルで共通のスタイリングを行うことができます.main.menu.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }
于 2009-03-02T14:25:27.927 に答える
5

ほとんどの人がすでに述べているように：

ピリオド（.）はクラスを示し、ハッシュ（#）はIDを示します。

の基本的な違いは、ページ上のクラスを何度も再利用できるのに対し、IDは1回しか使用できないことです。つまり、もちろん、WC3標準に固執している場合です。

同じIDを持つ要素が複数ある場合でもページはレンダリングされますが、それらの要素は一意ではないため、それらの要素をIDで呼び出して動的に更新しようとすると、問題が発生します。

IDプロパティがクラスプロパティに取って代わることに注意することも役立ちます。

于 2009-03-02T18:37:14.250 に答える
4

.class次の要素を対象としています。

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

#class次の要素を対象としています。

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

ID はドキュメント全体で一意でなければならないことに注意してください。ただし、任意の数の要素がクラスを共有できます。

于 2009-03-02T12:40:40.627 に答える
2

# は ID セレクターです。ID が一致する要素のみに一致します。次のスタイル ルールは、id 属性の値が「green」の要素に一致します。

#green {color: green}

詳細については、 http://www.w3schools.com/css/css_syntax.aspを参照してください。

于 2009-03-02T12:40:35.510 に答える
-2

これは、ルールを説明する私のアプローチで.styleあり#style、マトリックスの一部です。正しい順序でないと、互いにオーバーライドしたり、競合を引き起こしたりする可能性があります。

ラインナップはこちら。

マトリックス

#style 0,0,1,0 id

.style 0,1,0,0 class

これら2つをオーバーライドしたい場合<style></style>は、魔女がマトリックスレベルを持っているか1,0,0,0. 、@mediaクエリが上記のすべてをオーバーライドすることを使用できます...これについてはわかりませんが、IDセレクター#はページで1回しか使用できないと思います.

于 2015-05-20T07:25:11.880 に答える