Suponiendo que el navegador está cargando su hoja de estilo y está utilizando todos los selectores correctos, podría ser el caso de que sus selectores CSS personalizados tengan menos especificidad que Bootstrap.
El navegador tiene un mecanismo completo basado en el cual decide qué propiedades CSS aplicar a un elemento en caso de que haya múltiples reglas de estilo para ese elemento en particular. Cuanto más específico es un selector, mayor es su prioridad.
Ahora puede preguntarse cómo calcula el navegador esta especificidad. Es bastante simple: puede considerar la especificidad como un número de 4 dígitos, por ejemplo, ABCD y todos ellos son cero inicialmente.
- ¿Qué sitios web de codificación reconocen más los empleadores? He trabajado en varios proyectos de programación en LAMP en mi puesto actual, pero soy autodidacta. Estoy mirando Khan Academy y codeschool.com. ¿Qué miran realmente los empleadores?
- Estoy construyendo un sitio de subastas en línea. ¿Cómo evito una condición de carrera cuando varias personas ofertan a la vez?
- Cómo vincular archivos PHP y SQL existentes para crear una página web
- Desarrollé un marco de JavaScript que creo que es mejor en todos los sentidos, forma y forma que cualquier otro marco existente. ¿Debo cobrar por la licencia?
- Sé React y React-Redux junto con AJAX y Jquery. He realizado múltiples proyectos pero no puedo atraer a ningún reclutador. ¿Qué pasos tomo?
- Incrementa A cuando el elemento tiene CSS especificado utilizando el atributo de estilo (es decir, CSS en línea tiene la máxima prioridad)
- Incrementa B cuando hay una identificación en el selector CSS
- Incrementa C cuando hay una clase , pseudo clase o atributo en el selector CSS
- Incrementa D cuando hay un elemento en el selector CSS
Entonces, como ejemplo, el selector – ul#nav li .active a tendrá una especificidad de – 0113 ya que suponemos que no se aplica css en línea al a asumimos que A es 0, B es 1 porque hay 1 ID en el selector. de manera similar, C es 1 porque solo hay una clase en el selector CSS y D es 3 porque hay tres elementos especificados.
Ahora, si desea que su CSS personalizado funcione, necesitará que sus selectores de CSS sean más específicos que Bootstrap o simplemente puede usar el truco !important que no se recomienda. Si la especificidad de su selector y de bootstrap es la misma, entonces el navegador simplemente aplicaría los estilos que se cargan más tarde. (es decir, depende del orden de las etiquetas de enlace en su HTML)
Puede leer más sobre la especificidad de CSS aquí.
¡Que te diviertas!
