1

galera estou tentando fazer uma coisa simples no css que e mudar a cor da fonte do meu link e as cores estao sendo anuladas por algum motiv que eu nao sei qual e

 .navbar-inverse .navbar-nav>li>a {
    color: #9d9d9d;
}

galera consegi resolver o problema, o erro foi pq carreguei o bootstrap primeiro que a minha folha de estilo

2
  • Poderia também colocar o trecho em HTML? Commented 29/12/2016 às 21:23
  • Certifica-te que os teus css são importados no html depois dos do bootstrap
    – Miguel
    Commented 29/12/2016 às 22:13

5 Respostas 5

6

Como mencionado pelo @JoãoLuiz, evite usar !important, porqu no futuro você pode querer sobrescrever seus próprios estilos, e, além disso, os desenvolvedores que tiverem legado o seu código terão dificuldades para mudá-lo. De acordo com Stephanie Sullivan [Rewis], designer, isso é um ato muito egoísta.

Cada seletor no CSS tem um score, pontuação ou peso. Quanto mais específico for o seletor, maior será sua prioridade, porquanto maior será sua pontuação.

O !important só é recomendado quando alguma classe deve ser hard-code, praticamente imutável, só perde para as declarações inline.

Dessa forma, a melhor forma de sobrescrever o CSS do Twitter Boostrap é declarando suas próprias classes e pondo-as depois da inclusão dos estilos do framework em questão.

A melhor forma de fazer isso é do seguinte modo:

Incluir seus estilos

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

Usar os mesmos nomes das classes do Twitter Bootstrap

.container{
    max-width: 50%;  
}
3
  • 1
    +1 (se interessar, deixei uma referencia aqui no site de como calcular prioridades de seletor pt.stackoverflow.com/a/143893/70 - tem a explicação de como funciona, e link para uma ferramenta de cálculo)
    – Largato
    Commented 31/12/2016 às 23:14
  • 1
    obrigado por responder acho que o problema causado era pq eu carreguei a bootstrap primeiro que a minha folha de estilo css Commented 5/01/2017 às 23:07
  • @FernandoAlcantara Ms é exatamente isso que você tem que fazer. Primeiro o Bootstrap e depois seus estilos customizados. Commented 6/01/2017 às 17:02
5

Verifique se no <head>o seu CSS foi inserido depois do bootstrap. As regras são executadas sequencialmente.

4

Seu CSS deve ser declarado posterior ao bootstrap.

Tente evitar !importants.

0
4

Talvez a forma que você colocou o <link href="css/bootstrap.css" rel="stylesheet">

ou você pode alterá direto da biblioteca do bootstrap mas a forma que o Guilherme Alvez mencionou pondo o !important

2

Tente:

.navbar-inverse .navbar-nav>li>a {
    color: #9d9d9d !important;
}

Tente adicionar !important na propriedade CSS para forçar o CSS a usar a propriedade descrita nessa linha.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .