Heim >Web-Frontend >Front-End-Fragen und Antworten >Was ist der Konflikt mit CSS?

Was ist der Konflikt mit CSS?

藏色散人
藏色散人Original
2021-03-22 15:19:162735Durchsuche

CSS-Konflikt bedeutet, dass es bei der Anwendung mehrerer CSS-Stile auf dasselbe Element zu unterschiedlichen Formatierungen desselben Attributs zwischen diesen Stilen kommen kann. Wenn ein Konflikt auftritt, folgt der Browser dem Prioritätsprinzip oder dem nächstgelegenen Prinzip, um den Konflikt zu lösen. Lösen Sie CSS-Konfliktprobleme.

Was ist der Konflikt mit CSS?

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

CSS-Konflikte und -Lösung

Wenn mehrere CSS-Stile auf dasselbe Element angewendet werden, kann es zu Konflikten zwischen diesen kommen Stile Unterschiedliche Formatierung einer Eigenschaft. Wenn Konflikte auftreten, lösen Browser CSS-Konflikte, indem sie diese Prinzipien befolgen.

1. Prioritätsprinzip

2. Bei Stildefinitionen desselben Attributs überschreiben später definierte Stile.

Prioritätsprinzip: Dies bedeutet, dass der Stil mit der höchsten Priorität gültig ist, darunter Inline-Stil > Inline-Stil | verknüpfter externer Stil, dh der Inline-Stil hat die höchste Priorität, während der Inline-Stil und der verknüpfte externe Stil die Priorität haben Je nachdem, wo sie erscheinen, hat derjenige, der später erscheint, höhere Priorität. Bei Stilen desselben Typs gibt es auch unterschiedliche Prioritäten zwischen Selektoren: ID-Selektor > Klassenattribut-Selektor | Pseudo-Element-Selektor | Selektor |. Benachbarter Geschwisterselektor, d. h. der ID-Selektor hat die höchste Priorität.

Aktuelles Prinzip: Hauptsächlich für geerbte Stile: Je näher am übergeordneten Stil des formatierten Elements, desto höher ist die Priorität. Beispiel:

, legen Sie den Stil für das

-Tag fest, und seine Priorität ist höher als der

-Tag-Stil.

Darüber hinaus kann das Hinzufügen von !important nach dem Stil die Priorität des Stils auf die höchste Ebene erhöhen (höher als der Inline-Stil)

[Empfohlenes Lernen:

CSS-Video-Tutorial

]

Das obige ist der detaillierte Inhalt vonWas ist der Konflikt mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn