¿Qué debo hacer si hay un conflicto entre dos referencias CSS en una página web?

Método 1 Refinar el selector

Supongamos que el estilo de un elemento se define globalmente así: .abc {fondo: #000}, y el elemento con clase abc está subordinado Para un cierto elemento, como la siguiente estructura de código html

lt; div class="container"gt

lt; /p>

lt;/divgt;

Luego, en el CSS refinado, solo necesita agregar un selector para el elemento principal delante de .abc:

.container .abc {fondo: #fff}

De esta manera, la prioridad de .container .abc es mayor que .abc. Naturalmente, la configuración de fondo en el CSS refinado no será sobrescrita por el CSS global. ~~

Método 2: Mejorar la prioridad de los estilos

Personalmente no recomiendo este método, ya que es relativamente simple y tosco. El mismo ejemplo anterior, en el CSS refinado, simplemente agrega un !important después del estilo, por ejemplo:

.abc {background: #fff !improtant;}

Esta es la prioridad del estilo se elevará al nivel superior de forma predeterminada y los estilos globales no podrán afectarlo.

Método 3: cambiar el orden de carga de los dos estilos

Este método es relativamente simple, es decir, simplemente carga el CSS detallado después del CSS global, para que los estilos posteriores Anula automáticamente el estilo anterior. Sin embargo, si el orden de carga de estas dos hojas de estilo en su HTML se detalla primero y luego es global, debe ajustar ligeramente el código.