Como posso antecipar que tipo de seletor CSS vai funcionar?

StackOverflow https://stackoverflow.com/questions/1015341

  •  06-07-2019
  •  | 
  •  

Pergunta

Estou criando um formulário com dojo, e eu quero um campo de entrada de número restrito de gama. Então, eu uso isso: 

<input 
    id             = "sample_input"
    type           = "text"
    dojoType       = "dijit.form.NumberTextBox"
    name           = "sample_input"
    value          = "27"
    constraints    = "{min:1,max:30,places:0}"
    promptMessage  = "Enter a value"
    required       = "true" 
    invalidMessage = "Invalid value."
/>

Ele funciona, mas é muito grande, eo conteúdo é justificado à esquerda.

Nenhuma destas linhas, acrescentou ao meu elemento INPUT, parece fazer a diferença: 

width              = "60"
text-align         = "right"

que é uma questão em si, mas isso é OK, eu sei que eu deveria estar usando CSS em vez de HTML. Então eu adicionar este na seção HEAD: 

<style type="text/css">
    .NARROW {width:60px;}
    .RIGHT_JUSTIFIED {text-align:right;}
</style>

e isso para o elemento INPUT: 

class              = "NARROW RIGHT_JUSTIFIED"

e que resolve a largura, mas não a justificação do texto.

Para resolver a justificação do texto, devo ao invés fazer isso: 

<style type="text/css">
    .NARROW {width:60px;}
    input {text-align:right;}
</style>

Especificando a propriedade width no estilo input não funcionar, também.

Assim que é a minha pergunta. Por que não estilos inline trabalhar neste caso, e por que eu preciso usar um seletor de classe para a largura, mas um seletor de elemento para text-align? E como eu posso prever quando que seletor será aplicável?

Foi útil?

Solução

Eu tentei este código e parece funcionar bem 

<html>
<head>
<style type="text/css">

    .width_narrow {width:60px;}
    .align_right {text-align:right;}

</style>
</head>
<body>

<input
    name           = "sample_input"
    type           = "text" 
    class         = "width_narrow align_right" 
    id             = "sample_input"
    value          = "27"
    dojoType       = "dijit.form.NumberTextBox"
    constraints    = "{min:1,max:30,places:0}"
    promptMessage  = "Enter a value"
    required       = "true" 
    invalidMessage = "Invalid value."
/>

</body>  
</html>

Outras dicas

Você tem um erro de digitação em seu seletor de classe.

RIGHT_JUSTIFIED e justificado direita não irá corresponder

Se um seletor não está funcionando, há algumas provas rápidas que você pode fazer para isolar o problema.

Em primeiro lugar, eu tento tentar um seletor mais específico para ver se um seletor em uma parte diferente do CSS está substituindo seus estilos. Por exemplo, 

body #problem { ... }

é mais específico do que 

#problem { ... }

Você também pode adicionar a propriedade importante, que dá a precedência propriedade sobre [quase] todas as outras propriedades, não importa o quanto mais específico são:! 

#problem { width:60px !important; }

Se nenhuma dessas obras, há tanto uma questão mais profunda, ou um erro de digitação sorrateira. Nesta fase, isolando completamente a seção do HTML e CSS (como você fez na resposta acima) é o mais eficaz, mas também mais demorado.

Use FireBug para ver se há uma .RIGHT_JUSTIFIED substituindo seletor mais específico.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top