Was ist in CSS der Unterschied zwischen "." und "#" beim Deklarieren einer Reihe von Stilen?

Was ist der Unterschied zwischen #und .beim Deklarieren einer Reihe von Stilen für ein Element und welche Semantik spielt bei der Entscheidung, welche verwendet werden soll, eine Rolle?

Ja, sie sind unterschiedlich ...

#ist ein ID-Selektor , der verwendet wird, um auf ein einzelnes bestimmtes Element mit einer eindeutigen ID abzuzielen. ist ein Klassenselektor , mit dem mehrere Elemente mit einer bestimmten Klasse als Ziel ausgewählt werden. Um es anders zu sagen:

• #foo {}formatiert das mit einem Attribut deklarierte Einzelelementid="foo"
• .foo {}Stil wird alle Elemente mit einem Attribut class="foo"(Sie auch mehrere Klassen zugeordnet zu einem Element haben, trennen sie nur mit Leerzeichen, zum Beispiel class="foo bar")

Typische Verwendungen

Im Allgemeinen verwenden Sie #, um etwas zu stylen, von dem Sie wissen, dass es nur einmal angezeigt wird, z. B. Dinge wie Layout-Divs auf hoher Ebene wie Seitenleisten, Bannerbereiche usw.

Klassen werden verwendet, wenn der Stil wiederholt wird. Wenn Sie beispielsweise eine spezielle Form der Kopfzeile für Fehlermeldungen verwenden, können Sie einen Stil erstellen, h1.error {}der nur für gilt<h1 class="error">

Spezifität

Ein weiterer Aspekt, bei dem sich Selektoren unterscheiden, liegt in ihrer Spezifität - ein ID-Selektor wird als spezifischer als ein Klassen-Selektor angesehen. Dies bedeutet, dass bei Konflikten zwischen Stilen und Elementen mit dem spezifischeren Selektor weniger spezifische Selektoren überschrieben werden. Zum Beispiel gegebene <div id="sidebar" class="box">Regeln für #sidebarmit überschreiben widersprüchliche Regeln für.box

Erfahren Sie mehr über CSS-Selektoren

Weitere Informationen zu CSS-Selektoren finden Sie im Selectutorial. Sie sind unglaublich leistungsfähig. Wenn Sie einfach davon ausgehen, dass "# für DIVs verwendet wird", sollten Sie genau nachlesen, wie Sie CSS effektiver einsetzen können.

EDIT: Sieht aus wie Selectutorial haben könnte auf die große Website gegangen in den Himmel, versuchen Sie so dieses Archiv - Link statt.

Das #bedeutet, dass es mit dem ideines Elements übereinstimmt . Das .bedeutet den Klassennamen:

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


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

Beachten Sie, dass in einem HTML-Dokument das ID-Attribut eindeutig sein muss. Wenn Sie also mehr als ein Element haben, das einen bestimmten Stil benötigt, sollten Sie einen Klassennamen verwenden.

Der Punkt ( .) kennzeichnet einen Klassennamen, während der Hash ( #) ein Element mit einem bestimmten ID- Attribut kennzeichnet . Die Klasse gilt für jedes Element, das mit dieser bestimmten Klasse dekoriert ist, während der # -Stil nur für das Element mit dieser bestimmten ID gilt.

Klassenname:

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

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

Benanntes Element:

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

<div id="name"></div>

Es ist auch erwähnenswert, dass in der Kaskade ein id ( #) - Selektor spezifischer ist als ein ab ( .) - Selektor. Daher überschreiben Regeln in der ID-Anweisung Regeln in der Klassenanweisung.

Zum Beispiel, wenn beide der folgenden Aussagen:

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

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

werden auf dasselbe HTML-Element angewendet:

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

Die Regel Farbe: Blau würde die Regel Farbe: Rot überschreiben .

Ein paar kurze Erweiterungen zu dem, was bereits gesagt wurde ...

Ein idmuss eindeutig sein, aber Sie können dieselbe ID verwenden, um verschiedene Stile spezifischer zu gestalten.

Beispiel: HTML-Auszug:

<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>

Mit diesen können Sie verschiedene Stile anwenden:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

Eine weitere nützliche Sache, die Sie wissen sollten: Sie können mehrere Klassen für ein Element haben, indem Sie sie durch Leerzeichen abgrenzen ...

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

Die Sie erlaubt , gemeinsamen Styling zu haben in .menumit bestimmten Arten mit .main.menuund.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

.class zielt auf das folgende Element ab:

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

#class zielt auf das folgende Element ab:

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

Beachten Sie, dass die ID im gesamten Dokument eindeutig sein muss, während eine beliebige Anzahl von Elementen eine Klasse gemeinsam nutzen kann.

Wie so ziemlich jeder schon gesagt hat:

Ein Punkt ( .) gibt eine Klasse an , und ein Hash ( #) gibt eine ID an .

Der grundlegende Unterschied besteht darin, dass Sie eine Klasse auf Ihrer Seite immer wieder verwenden können, während eine ID einmal verwendet werden kann. Das ist natürlich, wenn Sie sich an die WC3-Standards halten.

Eine Seite wird weiterhin gerendert, wenn Sie mehrere Elemente mit derselben ID haben. Wenn Sie jedoch versuchen, diese Elemente dynamisch zu aktualisieren, indem Sie sie mit ihrer ID aufrufen, treten Probleme auf, da sie nicht eindeutig sind.

Es ist auch nützlich zu beachten, dass ID-Eigenschaften Klasseneigenschaften ersetzen.

Das # ist ein ID-Selektor. Es werden nur Elemente mit einer übereinstimmenden ID abgeglichen. Die nächste Stilregel stimmt mit dem Element überein, das ein ID-Attribut mit dem Wert "grün" hat:

#green {color: green}

Weitere Informationen finden Sie unter http://www.w3schools.com/css/css_syntax.asp

Hier ist mein Ansatz, die Regeln zu erklären .styleund #styleTeil einer Matrix zu sein. Wenn sie nicht in der richtigen Reihenfolge sind, können sie sich gegenseitig überschreiben oder Konflikte verursachen.

Hier ist die Aufstellung.

Matrix

#style 0,0,1,0 id

.style 0,1,0,0 class

Wenn Sie diese beiden überschreiben möchten, können Sie <style></style>eine 1,0,0,0. Matrixebene verwenden, oder die Abfrage von @media überschreibt alles oben Genannte ... Ich bin mir nicht sicher, aber ich denke, der ID-Selektor #kann nur einmal auf einer Seite verwendet werden.