Estou tentando alterar a cor de fundo da div
com as classes wrapper row-offcanvas row-offcanvas-left
, mas não estou conseguindo.
Alguem teria alguma ideia de como fazer?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEstou tentando alterar a cor de fundo da div
com as classes wrapper row-offcanvas row-offcanvas-left
, mas não estou conseguindo.
Alguem teria alguma ideia de como fazer?
Existem alguns casos que mesmo utilizando o !important, a nova aplicação não funciona. São casos como:
Outra classe utilizando !important:
Neste caso é só verificar a disposição das classes, por exemplo, wrapper row-offcanvas row-offcanvas-left
, a ultima aplicação de estilo será da ultima classe, então se você tiver:
-- bootstrap.css
.wrapper{
color: #ffffff;
}
.row-offcanvas-left{
color: #000000; //está cor será aplicada
}
Mas caso a classe wrapper
tenha o !important
ela será aplicada. E se as duas classes tiverem o !important
a row-offcanvas-left
será aplicada. Mas supondo que sua classe row-offcanvas-left
está utilizando o important mas não está funcionando.
Aplicação da chamada de arquivo:
Caso você tenha um arquivo style.css e outro bootstrap.css, quando este arquivo é chamado também é alterado o resultado. Por exemplo, se você tiver a classe row-offcanvas-left
nos dois arquivos, o arquivo que for chamado por ultimo, será o estilo aplicado:
--- index.html
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="style.css"> //arquivo que sera aplicado o estilo
--- index.html
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">//arquivo que sera aplicado o estilo
Isto se da devido a forma que os arquivos .html e .css são interpretados pelo navegador. Como se estivesse lendo um livro, da esquerda para direita, de cima para baixo.
Adicione uma nova classe em sua div por exemplo <div class="background">
E no código CSS faça assim.
<style>
.background{ background-color: blue; }
// Caso não funcione adicione o !important no final do css
</style>