web-dev-qa-db-ja.com

CSSでは、「。」の違いは何ですかスタイルのセットを宣言するときの「＃」

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

csscss-selectors
193
Sam152

はい、違います...

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

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

典型的な用途

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

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

特異性

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

CSSセレクターの詳細

Selectutorial を参照して、CSSセレクターのより優れた入門書を入手してください。信じられないほど強力であり、「＃がDIVに使用される」という概念だけの場合は、CSSの正確な使用方法を読んでください。より効果的に。

編集：Selectutorialは空の大きなウェブサイトに行ったように見えるので、代わりにこれを試してください archive link .

314
Paul Dixon

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

26
nickf

Dot（.）はclass名前を表し、ハッシュ（#）は特定の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>
10
tvanfosson

また、 cascade では、id（#）セレクターがより多く specific = 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>

color：blueルールはcolor：redルールをオーバーライドします。

7
Jans Carton

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

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
{ ... }
5
Peter Boughton

ほぼ全員がすでに述べているように：

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

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

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

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

4
Anders

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

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

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

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

Idはドキュメント全体で一意である必要がありますが、任意の数の要素がクラスを共有できることに注意してください。

3
Bobby Jack

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

#green {color: green}

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

2
tehvan