CSSでは、「。」の違いは何ですか。と一連のスタイルを宣言するときに「＃」？

違いは何である#と.要素のスタイルのセットを宣言して使用するものを決定する際に遊びに来る意味は何ですか？

はい、違います...

#はidセレクターで、一意のIDを持つ単一の特定の要素をターゲットにするために使用されますが あるクラスセレクタ標的するために使用される複数の特定のクラスで要素。別の言い方をすると：

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

典型的な用途

一般的に言えば、たとえば、サイドバー、バナー領域などの高レベルのレイアウトdivなど、一度しか表示されないことがわかっているものに＃を使用してスタイルを設定します。

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

特異性

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

CSSセレクターの詳細

CSSセレクターのより優れた入門書については、Selectutorialを参照してください。これらは信じられないほど強力であり、概念が単に「DIVに＃が使用される」というものであれば、CSSをより効果的に使用する方法を正確に理解するのが良いでしょう。

編集：Selectutorialが空の大きなウェブサイトに行ったように見えるので、代わりにこのアーカイブリンクを試してください。

#それが一致していることを意味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属性は一意でなければならないため、特定のスタイルを必要とする要素が複数ある場合は、クラス名を使用する必要があります。

ドット（.）はクラス名を示し、ハッシュ（#）は特定の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>

また、cascadeでは、id（#）セレクターはab（）セレクターよりも具体的です.。したがって、idステートメントのルールは、classステートメントのルールをオーバーライドします。

たとえば、次の両方のステートメントがあるとします。

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

同じHTML要素に適用されます。

<h1 id="specials" class="headline">Today's Specials</h1>

色：青のルールは、オーバーライドします赤：色ルールを。

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

アンは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
{ ... }

.class 次の要素をターゲットにします。

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

#class 次の要素をターゲットにします。

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

idはドキュメント全体で一意である必要がありますが、要素はいくつでもクラスを共有できます。

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

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

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

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

また、IDプロパティがクラスプロパティよりも優先されることに注意してください。

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

#green {color: green}

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

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

こちらがラインナップです。

マトリックス

#style 0,0,1,0 id

.style 0,1,0,0 class

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