Warum kann ich herstellerspezifische Pseudoelemente und Klassen in CSS nicht mit durch Kommas getrennten Selektoren kombinieren?

Warum herstellerspezifische Pseudoelemente und Klassen nicht kombiniert werden können

Trotz der Bequemlichkeit, durch Kommas getrennte Selektoren zu verwenden, um dieselben Stile auf mehrere Elemente anzuwenden, ist dieser Ansatz kann nicht auf herstellerspezifische Pseudoelemente und Klassen angewendet werden. Diese Inkonsistenz ergibt sich aus einer grundlegenden Regel, die in CSS2.1 dargelegt ist.

CSS2.1-Spezifikation

Die CSS2.1-Spezifikation besagt, dass jeder Selektor, der nicht vom Benutzeragenten analysiert werden kann, ignoriert werden muss mit dem entsprechenden Deklarationsblock. Dies gilt für nicht erkannte Herstellerpräfixe in Pseudoklassen- und Pseudoelementselektoren.

Browser-Analyse

Da verschiedene Browser unterschiedliche Präfixe verwenden, können bestimmte Benutzeragenten Pseudoelemente und Klassen nicht analysieren mit unbekannten Präfixen. Folglich müssen diese Browser alle Regeln löschen, die diese nicht erkannten Präfixe enthalten, was wiederholte Deklarationen erforderlich macht.

Beispiel

Betrachten Sie den folgenden Codeausschnitt, der darauf abzielt, Platzhaltertext herstellerspezifisch zu formatieren Selektoren:

input:-moz-placeholder {
  font-style: italic;
  text-align: right;
}
input::-moz-placeholder {
  font-style: italic;
  text-align: right;
}
input:-ms-input-placeholder {
  font-style: italic;
  text-align: right;
}
input::-webkit-input-placeholder {
  font-style: italic;
  text-align: right;
}

Ein Versuch, diese Regeln mithilfe von Kommas zu kombinieren, würde zur Folge haben in:

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {
  font-style: italic;
  text-align: right;
}

Dieser kombinierte Regelsatz schlägt jedoch fehl, weil:

• Browser, die Webkit verwenden (z. B. Safari), können :-moz-*-Präfixe nicht analysieren.
• Browser, die Gecko verwenden (z. B. Firefox), können :-ms- und nicht analysieren :-webkit--Präfixe.
• Browser, die Edge verwenden (z. B. Internet Explorer), können :-webkit-- und :-moz--Präfixe nicht analysieren.

Fazit

Aufgrund von Browser-Parsing-Einschränkungen ist eine Kombination nicht möglich herstellerspezifische Pseudoelemente und Klassen in einem einzigen durch Kommas getrennten Selektor. Dies führt dazu, dass beim Stylen von Elementen in verschiedenen Browsern wiederholte Deklarationen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWarum kann ich herstellerspezifische Pseudoelemente und Klassen in CSS nicht mit durch Kommas getrennten Selektoren kombinieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!