entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

CSS-Por qué se superpone un atributo a otro en este caso concreto

Tengo las siguientes lineas en index.html

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav menu-items">
                <li><a href="#">HOME</a></li>
                <li><a href="#">ANDROID</a></li>
                <li><a href="#">COLOSSUS</a></li>
                <li><a href="#">SOFTWARE LIBREA</a></li>
                <li><a href="#">NIRI BURUZ</a></li>
              </ul>

Y parte del CSS es el siguiente:

.menu-items >li > a{
    color:red;
}

En cambio el los links de clase menu-items no se muestran de color rojo. A continuación muestro una captura de firebug en la cual se ve como se esta superponiendo el valor de navbar-default .navbar-nav > li > a Me gustaría saber el motivo de esto y como solucionarlo.

Gracias.

enter image description here

3 Respuestas

1voto

Leonardo-Tadei Puntos227320

Hola @egoitz_gonzalez,

es posible que los estilos de Bootstrap le "ganen" a los tuyos, si en la cabecera del HTML, tenés style.css antes que bootstrap.css.

Los estilos se aplican en orden, y para que el tuyo sobrescriba a los de bootstrap cuando ambos definen la misma regla, el tuyo tiene que estar después y no antes.

Saludos cordiales!

0voto

egoitz_gonzalez comentado

Gracias por la aclaración @Leonardo-Tadei pero parece que no es el caso. Mi fichero css debería de ser el último en cargar.

        <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

Saludos!

0voto

Leonardo-Tadei comentado

Probá definir el estilo en este orden:

<ul class="menu-items nav navbar-nav">

Si no funciona, avisame que hay otra solución que tal vez te guste menos...

0voto

egoitz_gonzalez comentado

No. Esto tampoco funciono. Solo funciono el !importatque plantea @Peter . No me importa dejarlo de ese modo pero quería saber la razón.

0voto

Leonardo-Tadei comentado

Hola @egoitz_gonzalez,

el motivo de por qué el estilo de bootstrap sobreescribe al tuyo, es que por la forma en que está definido, tiene precedencia. Si te fijás, la definición de bootstrap empieza más arriba en la jerarquía del DOM.

Lo que tenés que hacer es definir tu estilo usando la misma jerarquía, es decir, el HTML quedaría así:

<ul class="nav navbar-nav">

y la definición de tu CSS en style.css así:

.navbar-default .navbar-nav > li > a {
  color: red;
}

Siendo las mismas reglas, y al ejecutarse última la tuya porque está después de botstrap.css, tiene que ganar la tuya!

Si esto no funciona, poné la página en algún URL para verla como dice @Peter, porque hay alguna otra cosa pasando...

PD: a mi me parece mejor la idea de definir tus propias reglas en archivo aparte que modificar bootstrap.css, porque en caso de poner una nueva versión, perderías todos tus cambios

0voto

egoitz_gonzalez comentado

Gracias! todo funcionando y entendido!

Saludos cordiales.

2votos

Peter Puntos150460

Bootstrap está sobre escribiendo tus estilos y habría que ver la web online para ver todo el código y decirte exactamente las cosas, aunque puedes utilizar:

color:red!important;

Con eso te queda.

1voto

egoitz_gonzalez comentado

Sí eso es lo que he hecho de forma temporal o permanente. Pero em gustaría saber la razón. Yo pensaba que siendo menu-items la última clase cogería los estilo desde ese selector y no de los de Bootstrap.

0voto

Peter comentado

Para poderte decir exacto como te comento arriba, habría que ver la web online para poder inspeccionar el código "en vivo". Sin embargo estás utilizando una clase diferente a la real de Bootstrap, que es "navbar-nav > li" y no "menu-items".

Saludos.

0voto

luis2016 Puntos1930

Mejor descargas los archivos de Boostrap y ahi tienes la libertad de modificar el CSS a tu gusto.No es mala idea.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta