2
respostas

Prioridades CSS

Pessoal , boa tarde. Tudo bem?

Tenho uma dúvida, por exemplo estou montando meu arquivo


#btnEnviar  {
    width: 25%
}


#frmContato input {
    display: block;
    margin-bottom: 20px;
    padding: 10px 25px;
    width: 50%
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

eu pensava que pela prioridade o CSS atribuido direto a um id seria prioritario ao atribuido ao ID PAI... no caso meu botão enviar estar com a largura de 50% o CSS para atribuir 25% nao esta acatando devido prioridade , como funciona a questão da prioridade para resolver esse caso?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Oi Jonathan,

O peso de cada elemento é definido da seguinte forma:

  • 1000 => elemento inline Style.
  • 100 => seletores em #id
  • 10 => seletores em .classes, pseudo-classes e atributos
  • 1 => seletores por elemento (tags como a, em, strong, p, div)

Então:

#btnEnviar = 100

#frmContato input = 100 +1 = 101 (tem prioridade)

vc pode usar "!important" para ter prioridade

#btnEnviar  {
    width: 25% !important;
}

Obrigado pela resposta Luis Dias!