Warum kann ich herstellerspezifische Pseudoelemente und Klassen nicht in einer einzigen CSS-Regel kombinieren?

Mischen herstellerspezifischer Pseudoelemente und Klassen in CSS

In CSS verwenden wir häufig herstellerspezifische Pseudoelemente und Klassen, um Verbessern Sie die Browserkompatibilität. Es ist jedoch nicht möglich, diese trotz gemeinsamer Eigenschaften in einem Regelsatz zu kombinieren.

Warum nicht?

CSS2.1 schreibt vor, dass ein Selektor vor dem gültig sein muss Der Benutzeragent wendet den Deklarationsblock an. Das Voranstellen von Anbieternamen in Selektoren führt bei einigen Browsern zu nicht erkannten Zeichen. Daher müssen Benutzeragenten diese Regeln löschen, um ihre Gültigkeit aufrechtzuerhalten.

Im Einzelnen:

• Die Browser der Anbieter verstehen die Präfixe der anderen nicht.
• Ein durch Kommas getrennter Selektor mit Herstellerpräfixen hat für jeden Browser mindestens einen nicht erkennbaren Selektor, was dazu führt, dass die gesamte Regel ungültig ist ignoriert.

Auswirkungen auf das Styling

Wenn wir beispielsweise Platzhaltertext formatieren, zwingt uns diese Einschränkung dazu, mehrere redundante Regeln zu schreiben, da jeder Anbieter eine eigene benötigt Präfix:

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

Schlussfolgerung

Das Verständnis dieser Einschränkung ermöglicht es uns, gültige und konsistente CSS-Stile zu erstellen. Während Herstellerpräfixe manchmal für die Browserkompatibilität erforderlich sind, ist das Mischen in einem einzigen Regelsatz aufgrund browserspezifischer Parsing-Regeln immer noch nicht möglich.

Das obige ist der detaillierte Inhalt vonWarum kann ich herstellerspezifische Pseudoelemente und Klassen nicht in einer einzigen CSS-Regel kombinieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!