Klassenüberschreibung, wenn zwei Klassen einem Div zugeordnet sind

Ich habe ein <div>Tag erstellt, in dem ich zwei Klassen für ein <div>Tag anwenden wollte, das eine Miniaturbildgalerie sein würde. Eine Klasse für ihre Position und die andere Klasse für ihren Stil. Auf diese Weise konnte ich den Stil anwenden, ich hatte einige seltsame Ergebnisse, die mich zu einer Frage brachten.

Können einem <div>Tag zwei Klassen zugewiesen werden ? Wenn ja, welches setzt das andere außer Kraft oder welches hat Priorität?

Einem Div können mehrere Klassen zugewiesen werden. Trennen Sie sie einfach im Klassennamen durch Leerzeichen wie folgt:

<div class="rule1 rule2 rule3">Content</div>

Dieses Div entspricht dann allen Stilregeln für drei verschiedene Klassenselektoren : .rule1, .rule2und .rule3.

CSS-Regeln werden auf Objekte auf der Seite angewendet, die ihren Selektoren in der Reihenfolge entsprechen, in der sie im Stylesheet vorkommen. Wenn zwischen zwei Regeln ein Konflikt besteht (mehr als eine Regel versucht, dasselbe Attribut festzulegen), bestimmt die CSS-Spezifität , welche Regel hat Vorrang.

Wenn die CSS-Spezifität für die widersprüchlichen Regeln identisch ist, hat die spätere (die später im Stylesheet oder im späteren Stylesheet definierte) Vorrang. Die Reihenfolge der Klassennamen auf dem Objekt selbst spielt keine Rolle. Bei gleicher CSS-Spezifität ist die Reihenfolge der Stilregeln im Stylesheet von Bedeutung.

Wenn Sie also Stile wie diesen hätten:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Da dann beide Regeln mit dem div übereinstimmen und genau die gleiche CSS-Spezifität haben, kommt die zweite Regel später, sodass sie Vorrang hat und der Hintergrund rot ist.

Wenn eine Regel eine höhere CSS-Spezifität hatte ( div.rule1höhere Werte als .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Dann hätte es Vorrang und die Hintergrundfarbe wäre hier grün.

Wenn die beiden Regeln nicht in Konflikt stehen:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Dann werden beide Regeln angewendet.

Tatsächlich wird die Klasse, die zuletzt im CSS definiert wurde, auf Ihr Div angewendet.

Hör zu:

rot zuletzt in css

.blue{ color: blue; }
.red { color: red;  }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

vs.

blau zuletzt in css

.red { color: red;  }
.blue{ color: blue; }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

Wenn Sie fragen, ob sie dieselbe Eigenschaft haben, nehmen Sie gemäß der CSS-Regel die letzte Anweisung.

<div class="red green"></div>

CSS

.red{
 color:red;
}
.green{
 color:green;
}

Gemäß dem obigen Beispiel wird die letzte Anweisung gemäß dem CSS- Baum verwendet, der .green ist .

Die zuletzt im CSS definierte Klasse hat Priorität, sofern nichts anderes zutrifft.

Informieren Sie sich über die CSS-Priorität, um zu sehen, wie es funktioniert.

Viele Klassen können einem Element zugewiesen werden. Sie trennen sie einfach durch ein Leerzeichen

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

Aufgrund der Kaskade in CSS werden die Überschreibungsregeln, die dem unteren Rand des Dokuments am nächsten liegen, auf das Element angewendet.

Also wenn du hast

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

Die rote Farbe wird verwendet, jedoch nicht die Hintergrundfarbe, da sie nicht überschrieben wurde.

Sie müssen auch die CSS-Spezifität berücksichtigen. Wenn Sie einen spezifischeren Selektor haben, wird dieser verwendet:

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

Der zweite Selektor wird hier verwendet, da er spezifischer ist.

Hier können Sie sich alles ansehen .