Können Sie mehrere :before-Pseudoelemente auf dasselbe Element anwenden?

Können mehrere :before-Pseudoelemente für dasselbe Element existieren?

Frage:

Ist es möglich, mehrere :before-Pseudoelemente auf dasselbe Element anzuwenden? Zum Beispiel:

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Antwort:

Nein, CSS2.1 legt fest, dass ein Element zu einem bestimmten Zeitpunkt nur ein Pseudoelement beliebiger Art haben kann . Das bedeutet, dass ein Element zwar sowohl ein :before- als auch ein :after-Pseudoelement haben kann, aber nicht mehr als eines von jedem Typ haben kann.

Wenn mehrere :before-Regeln auf dasselbe Element abzielen, Sie werden in ein einziges :before-Pseudoelement kaskadiert. Der obige Code reduziert sich beispielsweise wie folgt:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

Nur ​​die letzte Inhaltsdeklaration mit der höchsten Priorität wird wirksam.

Problemumgehungen:

Wenn Sie mehrere :before-Pseudoelemente auf dasselbe Element anwenden möchten, können Sie kombinierte Selektoren verwenden, um genau anzugeben, was der Browser tun soll. Zum Beispiel:

.circle.now:before {
    content: "○";
}
.circle.now:hover:before {
    background: #ccc;
}

Dadurch werden zwei :before-Pseudoelemente mit unterschiedlichem Inhalt und Stil erstellt.

Das obige ist der detaillierte Inhalt vonKönnen Sie mehrere :before-Pseudoelemente auf dasselbe Element anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!