CSS Tirar herança de propriedade

[Natanael Marrafon Rocha]

Eu estou fazendo um projeto e diz um menu drop dawn usando as propriedades do display só que as listas que coloquei dentro da div que coloquei para aparecer ficam com herança de propriedade, como faço para tirar essa herança de propriedade ? tipo fazer resetar tudo que esta dentro da div para mim ter o controle do que faço com o que esta dentro da div ?

 

Olha como fica, fica igual as listas de cima eu queria resetar ela para aparecer como se não tivesse nenhuma propriedade css adicionada.

 

[GabrielSennaMs]

@Natanael Marrafon Rocha Isso pode ser um problema de seleção, e não de herança.

Você pode está fazendo a especificidade de seletores das div de uma forma muito abrangente, tenta especificar as classes.

A unica maneira de retorna uma div as suas propriedades padrões e colocando manualmente as propriedades 

[DiF]

@Natanael Marrafon Rocha Caso você não consiga identificar onde está puxando o atributo, você pode sobrescrever dando um grau maior de precedência de regras.

 

Para sobrescrever, use o !important.

 

Exemplo:

p{
  color: red;
}

p{
  color: green !important;
}

O parágrafo, apesar de ser declarado como vermelho, ele será de cor verde, porque o !important aumenta o grau de precedência.

Em outras palavras,  Uma declaração de estilo com !important ignora qualquer hierarquia e prevalece sobre todas as demais, é a de mais alta prioridade.

[Natanael Marrafon Rocha]

11 minutos atrás, GabrielSennaMs disse:

@Natanael Marrafon Rocha Isso pode ser um problema de seleção, e não de herança.

Você pode está fazendo a especificidade de seletores das div de uma forma muito abrangente, tenta especificar as classes.

A unica maneira de retorna uma div as suas propriedades padrões e colocando manualmente as propriedades 

Então a forma que eu estou atacando a seleção é assim:

Citação

#nav ul li a{
	color:white;
}

 

 

Você esta me surgerindo que eu adicione uma class nos comandos html ?

adicionado 2 minutos depois

4 minutos atrás, DiF disse:

@Natanael Marrafon Rocha Caso você não consiga identificar onde está puxando o atributo, você pode sobrescrever dando um grau maior de precedência de regras.

 

Para sobrescrever, use o !important.

 

Exemplo:

p{
  color: red;
}

p{
  color: green !important;
}

O parágrafo, apesar de ser declarado como vermelho, ele será de cor verde, porque o !important aumenta o grau de precedência.

Em outras palavras,  Uma declaração de estilo com !important ignora qualquer hierarquia e prevalece sobre todas as demais, é a de mais alta prioridade.

 

Eu não sabia sobre esse !important, quando eu coloco ele é como se eu dissesse a propriedade que é de prioridade fazer a alteração só naquela propriedade ?

[GabrielSennaMs]

@Natanael Marrafon Rocha O seu problema realmente está nos seus seletores ele está abrangido todos os elementos <a> dentro de <li> e todos os elemento <li> dentro de <ul>, tenta especificar mais os elementos <a> e <li> você pode colocando uma class ou usando outros tipos de seletores. 

Um Exemplo:

#nav > ul > li > a{
	color:white;
}

 

O !Important quebra a hierarquia do css, assim uma declaração de estilo com !important ignora qualquer hierarquia e prevalece sobre todas as demais, é a de mais alta prioridade.

[DiF]

@Natanael Marrafon Rocha É com foi dito pelo colega cima. O important sobrescreve qualquer regra. Mas claro há momentos que não deve usar ele. Ele é usado mais para quando você precisa sobrescrever algo, mas não quer dizer que tenha que usar ele sempre. 

 

Para evitar de usar o important ou um estilo diretamente no elemento, é melhor atentar-se aos pontos de especificidade.

Cada elemento, ID, classe vale pontos de especificidade. 

 

A pontuação é somada numa estrutura simples que começam com zeros , assim: 0,0,0,0. A estrutura é composta por quatro números, quanto mais o número estiver na esquerda, mais específico e mais força ele tem sobre outros seletores

exemplo:

 

div ul li a   =  0,0,0,4  = 4 elementos, 4 pontos na primeira casa

 

O id é mais específico que uma classe que, por sua vez, é mais específica que um elemento.

 

Vamos a um exemplo mais concreto:

div p.bio {
  font-size: 14px; - (0, 0, 1, 2)
}
#sidebar p {
  font-size: 12px; - (0, 1, 0, 1)
}

O segundo tem mais especifidade que o primeiro e assim tem precedência.

Importância supera especificidade. Quando colocamos uma propriedade CSS com !important você está substituindo regras de especificidade e assim:

div p.bio {
  font-size: 14px; !important
}
#sidebar p {
  font-size: 12px;
}

A primeira linha do CSS acima tem precedência ao invés da segunda. !important ainda é principalmente um hack em torno das regras básicas

 

Fontes:

https://tableless.com.br/pontuacao-especificidade-css/

https://medium.com/emanuelg-blog/entendendo-a-precedência-de-estilo-em-css-especificidade-herança-e-efeito-cascata-a437c4929173

 

PS: Otimizando seu CSS e respeitando os pontos de especificidade, você evita de ter que apelar para o !important.  Mas caso você não consiga, adote o important como uma medida provisória, depois você restrutura seu CSS.