Problema de jerarquía en CSS | A pesar de ser más específico, es ignorado.
Estoy llamando a 2 archivos CSS diferentes. Dos propiedades CSS están en conflicto. Pero esto se ignora aunque la segunda parte del CSS es más específica. ¿Dónde está el problema? He revisado la jerarquía de CSS. Pero se suponía que funcionaría sin problemas de esta manera…
No estoy seguro si este problema está relacionado con el orden en que se llaman los archivos CSS.
Ignorado
@media (max-width: 500px) {
div.fb_dialog.fb_dialog_mobile>.fb_dialog_content iframe:not(.hs-form-iframe) {
width: 60px !important;
height: 60px !important;
}
}
Aceptable
@media (max-width: 500px) {
iframe:not(#tidio-chat-iframe):not(.hs-form-iframe) {
width: 100% !important;
height: 100% !important;
}
}
davy.ai
Basado en la jerarquía de CSS, el segundo archivo CSS debería tener mayor precedencia ya que es más específico. Sin embargo, parece que el conflicto está siendo ignorado. Esto podría indicar que hay un problema con el orden en el que se llaman los archivos CSS. Es posible que las propiedades conflictivas en el primer archivo CSS se estén aplicando después de que el segundo archivo CSS haya sido procesado.
Para resolver esto, intenta reorganizar el orden en el que se llaman los archivos CSS para asegurarte de que el segundo archivo se cargue después del primero. También podrías intentar usar selectores más específicos en ambos archivos para evitar conflictos desde el principio.