3

Buen día! Necesito sobreescribir un estilo css que viene de un archivo externo.

Este es el css que veo en el inspector.

#buscador02-box {
    width: 100%/*780px*/;
    margin: 0 auto;
    height: auto;
    padding: 30px 0;
    background-color: rgba(0, 0, 0, 0.7);
    padding-bottom: 20px;
}

Quiero cambiar la opacidad, desde el inspector funciona pero en el archivo css no lo toma

        `background-color: rgba(0, 0, 0, 0.4)!important;`

La secuencia que me muestra el inspector es

       `body.bgcolorA section#buscador02 div#buscador02-box`

¿cómo tendría que escribirlo para que tenga prioridad este css?

Gracias por la ayuda!! ;)

4
  • estoy usando #buscador02-box pero no se como debería agregar la sección y hacerlo más específico.
    – Mariana
    Commented el 14 jul. 2020 a las 20:16
  • sería div.buscador02-box?
    – Mariana
    Commented el 14 jul. 2020 a las 20:32
  • no, tampoco funciona.
    – Mariana
    Commented el 14 jul. 2020 a las 20:36
  • La secuencia es la que está indicada más arriba. Como debería escribirla?
    – Mariana
    Commented el 14 jul. 2020 a las 20:38

4 respuestas 4

0

deberías en la etiqueta head <head> Poner la etiqueta style <style> después del código de la etiqueta <link> del archivo .css y después lo que tú dices. La etiqueta style situada en el head si la pones después de la etiqueta link predomina del archivo css.

0

Buenas tienes distintas opciones.

1º Indicar dentro de la propia etiqueta a editar un style como por ejemplo <p style="background-color: rgba(0, 0, 0, 0.4) !important;">

2º Generar un nuevo apartado <style></style> dentro del fichero html.

3º Modificar el id del elemento e indicar el nuevo css.

Ejemplo 2º:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <style type="text/css" media="screen">
            #idPrueba{
                color:red;
            }
        </style>
    </head>
    <body>
     <p id='idPrueba'>HOLA</p>
    </body>
    </html>

5
  • En el index.php se llama a diferentes archivos css. Ninguno de ellos es el css donde están las reglas para este id. Es un archivo externo y no se desde donde es llamado.
    – Mariana
    Commented el 14 jul. 2020 a las 21:46
  • No tengo mucha experiencia con css y html
    – Mariana
    Commented el 14 jul. 2020 a las 21:48
  • Donde tendría que agregar el style?
    – Mariana
    Commented el 14 jul. 2020 a las 21:49
  • <link rel="stylesheet" type="text/css" id="style_sheet" href="css/skins/default.css">
    – Mariana
    Commented el 14 jul. 2020 a las 21:49
  • Buenas perdona la tardanza, no vi tu comentario te pongo un ejemplo de añadir style dentro del propio fichero. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css" media="screen"> #idPrueba{ color:red; } </style> </head> <body> <p id='idPrueba'>HOLA</p> </body> </html>
    – Pastor
    Commented el 27 jul. 2020 a las 7:25
0

tiene un elemento de ID (#buscador02-box) En el orden jerárquico de css necesitas colocar un elemento de mayor jerarquía que seria el IN LINE para poder modificar. seria algo como así:

<div id="buscador02-box " style="(aca colocas la propiedad que quieres agregar)"></div>

otra opción es agregar una hoja de estilos nueva seria algo así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <link rel="stylesheet" href="(aca colocas la ruta de tu hoja externa)">

</head>
<body>
   <div id="nuevobuscador02-box "> </div>
</body>

y la hoja externa debería ir así (puedes usar uno de esos dos como mejor te convenga)

#nuevobuscador02-box {
width: 100%/*780px*/;
margin: 0 auto;
height: auto;
padding: 30px 0;
background-color: rgba(0, 0, 0, 0.7);
padding-bottom: 20px;
opacity: 0.5;
}

       (ó)

#nuevobuscador02-box {

width: 100%/*780px*/;
margin: 0 auto;
height: auto;
padding: 30px 0;
background-color: rgba(0, 0, 0, 0.4);
padding-bottom: 20px;

}

en este caso tienes que tener cuidado que el id no este asociado a un elemento de JS si es así tu opción es el inline ya que no puedes colocar dos id a una etiqueta,(ojo hay otras formas pero ya tendrías que ser un poco mas creativa a mi parecer esto es lo mas simple)

0

Dude, solo usa el mismo selector de la primera regla mas adelante en el código, o bien la hoja de estilos en donde tienes la nueva regla, la tienes que enlazar después de la otra en donde esta la primera regla que quieres machacar.

Ejemplo sobreescribiendo en la misma hoja

#buscador02-box {
    width: 100%/*780px*/;
    margin: 0 auto;
    height: auto;
    padding: 30px 0;
    background-color: rgba(2, 12, 12, 0.7);
    padding-bottom: 20px;
}

#buscador02-box {
    width: 100%;
    margin: 0 auto;
    height: auto;
    padding: 30px 0;
    background-color: rgba(2, 12, 12, 0.1);
    padding-bottom: 20px;
}
<div id="buscador02-box">
Soy feliz como una lombris
</div>

Ejemplo sobreescribiendo en hojas diferentes

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

Para que aprendas mas sobre la cascada, aquí te dejo este link: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.