Detaillierte Erläuterung des Unterschieds zwischen CSS-Klassenselektoren und ID-Selektoren

In diesem Artikel wird hauptsächlich der Unterschied zwischen CSS-Klassenselektoren und ID-Selektoren vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Lassen Sie uns dem Editor folgen und einen Blick darauf werfen. Ich hoffe, er kann jedem helfen, CSS-Klassenselektoren und ID-Selektoren besser zu lernen.

Klassenauswahl

HTML-Code:

<p class="one"></p>
<p></p>

CSS-Code:

p {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}

.one {
    box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}

Wenn Sie das Erscheinungsbild bestimmter Elemente auf einer Webseite von anderen ähnlichen Tags unterscheiden möchten, können Sie Klassenselektoren verwenden.

Geben Sie dem Selektor zunächst einen Namen und weisen Sie diesen Namen dann dem HTML-Tag zu, das Sie dekorieren möchten. Im vorherigen Beispiel habe ich beispielsweise das erste p „eins“ genannt. Der

-Klassenselektor ermöglicht außerdem eine präzise Kontrolle über das Erscheinungsbild eines Elements, unabhängig davon, welches Tag das Element verwendet. Sie möchten beispielsweise ein oder zwei Wörter in einem Absatz verzieren, ohne das Erscheinungsbild des gesamten e388a4556c0f65e1904146cc1a846bee-Tags zu beeinträchtigen. Zu diesem Zeitpunkt können Sie die Klassenauswahl verwenden, um die zu dekorierenden Wörter auszuwählen.

Es ist zu beachten, dass Sie bei Verwendung des Klassenselektors zum Auswählen einiger Wörter in einem Tag das 45a2772a6b6107b401db3c9b82c049c2-Tag verwenden müssen.

Verwendung des Klassenselektors:

1. In CSS muss der Name des Klassenselektors mit einem Punkt beginnen. Auf diese Weise kann der Webbrowser den Klassenselektor im Stylesheet finden.

2. Der Name des Klassenselektors darf nur Buchstaben, Zahlen, Bindestriche und Unterstriche enthalten.

3. Der Selektorname muss mit einem Buchstaben beginnen.

4. Bei der Klassenauswahl wird die Groß-/Kleinschreibung beachtet.

5. In HTML legen Tags das Klassenattribut fest. 800030c8babd35eac79bd1199fac5a26

In HTML muss dem Wert des Klassenattributs kein Punkt vorangestellt werden. Ein Punkt ist nur vor dem Namen des Klassenselektors im Stylesheet erforderlich.

Ein Tag verwendet mehrere Klassen

Ein Tag kann nicht nur dieselbe Klasse auf verschiedene Tags anwenden, sondern auch mehrere Klassen gleichzeitig verwenden.

Das Schreiben mehrerer Klassenstile und das Festlegen mehrerer Klassen in einem Tag klingt nach viel Arbeit, wird aber oft in der tatsächlichen Entwicklung erledigt. Das beliebte Bootstrap-Framework erledigt dies.

Zum Beispiel haben wir mehrere ps. Jedes p hat die gleiche Größe und den gleichen Rand, aber andere Attribute sind unterschiedlich.

HTML-Code:

<p class="p one"></p>
<p class="p two"></p>
<p class="p three"></p>

CSS-Code:

/* 类型选择器 */
p {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}

/* 以下三个都是类选择器 */
.one {
    background: linear-gradient(#1574A8, #15A892);
    box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}
.two {
    background: radial-gradient(#E94E65, #15A892);
}
.three {
    background: 
        linear-gradient(to bottom, cyan, transparent),
        linear-gradient(225deg, magenta, transparent),
        linear-gradient(45deg, yellow, transparent);
}

Beide Webbrowser und HTML ermöglichen den gleichen Tag-Satz mehrere Klassen aufbauen. In HTML werden Klassen über das Klassenattribut angegeben, wobei jeder Klassenname in seinem Wert durch ein Leerzeichen getrennt ist.

Der Browser führt die Attribute jeder Klasse zusammen und wendet sie dann auf das Element an.

ID-Selektoren

CSS verwendet ID-Selektoren, um bestimmte Teile einer Webseite auszuwählen, z. B. ein Banner, eine Navigationsleiste oder einen Hauptinhaltsbereich.

Die Methode zum Festlegen der ID in HTML ähnelt der Methode zum Festlegen der Klasse, die verwendeten Attribute sind jedoch unterschiedlich.

HTML-Code:

<p id="d1"></p>
<p></p>

CSS-Code:

p {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}
#d1 {
    background: 
        linear-gradient(to bottom, cyan, transparent),
        linear-gradient(225deg, magenta, transparent),
        linear-gradient(45deg, yellow, transparent);
}

In HTML legt ein Element das ID-Attribut fest.

Beginnen Sie in CSS mit dem Rautenzeichen #, gefolgt vom ID-Namen.

ID richtig verwenden

Das ID-Attribut von HTML hat einige Funktionen, die durch das Klassenattribut nicht erreicht werden können. Diese Vorteile haben nichts mit CSS zu tun, daher sind ID-Selektoren völlig unnötig.

Vorteile der ID:

1. Nachdem JavaScript-Programmierer IDs für Schlüsselelemente der Webseite festgelegt haben, können sie Elemente auf der Webseite leicht finden und verarbeiten die IDs einen bestimmten Teil des Inhalts. Beispielsweise legen Programmierer häufig IDs für Elemente eines Formulars fest, beispielsweise ein Textfeld zum Ausfüllen des Namens eines Besuchers. JavaScript kann nach dem Auffinden dieses Formularelements anhand der ID viele Verarbeitungsvorgänge ausführen, um beispielsweise sicherzustellen, dass das Feld nicht leer ist, wenn der Besucher das Formular absendet.

2. Die Verwendung von IDs kann auch auf bestimmte Teile der Webseite verlinken, was eine schnelle Navigation auf Webseiten mit viel Inhalt erleichtert. Wenn Sie über ein alphabetisches Glossar verfügen, können Sie mithilfe von ID-Selektoren Links zu Abschnitten erstellen, die mit jedem Buchstaben beginnen.

In Webdesign-Kreisen gibt es einen Trend, keine ID-Selektoren in CSS zu verwenden.

Ich verstehe, dass es später schwieriger sein wird, den Stil zu überschreiben, da der ID-Selektor sehr spezifisch ist. Und die Verwendung von ID ist nicht so umfassend wie die Verwendung von Klasse.

Das ID-Attribut entspricht unserem Personalausweis, der eindeutig identifizierbar ist.

Klassenattribute ähneln in gewisser Weise den Werten von Personen. Es kann viele Personen mit denselben Werten geben, und eine Person kann auch mehrere Werte gleichzeitig haben.

Der Unterschied zwischen ID-Selektor und Klassenselektor

1. Ein Element kann mehrere Klassen haben, und eine Klasse kann auch mehreren Elementen hinzugefügt werden.

2. Eine ID kann nur einmal auf derselben Webseite erscheinen und ein Element kann nur eine ID haben.

Verwandte Empfehlungen:

CSS-Klassenselektor und ID-Selektor

CSS-Klassenselektor (4)_html/css_WEB-ITnose

CSS-Selektor

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen CSS-Klassenselektoren und ID-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!