Comment puis-je anticiper quel type de sélecteur CSS va fonctionner?

Je crée un formulaire avec dojo, et je veux un champ de saisie de numéro restreint. Donc, j'utilise ceci:Comment puis-je anticiper quel type de sélecteur CSS va fonctionner?

<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." 
/>

Cela fonctionne, mais il est trop large et le contenu est justifié à gauche.

Aucune de ces lignes, ajouté à mon élément INPUT, semble faire une différence:

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

qui est une question en soi, mais c'est OK, je sais que je devrais utiliser CSS au lieu de HTML J'ajoute donc cela dans la section HEAD:

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

et ce à l'élément INPUT:

class    = "NARROW RIGHT_JUSTIFIED"

et qui résolve la largeur, mais pas la justification du texte.

Pour résoudre la justification du texte, je dois le faire à la place:

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

Spécification de la propriété width dans le style input ne fonctionne pas non plus.

Voilà ma question. Pourquoi les styles en ligne ne fonctionnent-ils pas dans ce cas, et pourquoi dois-je utiliser un sélecteur de classe pour la largeur, mais un sélecteur d'élément pour text-align? Et comment puis-je anticiper quand le sélecteur sera applicable?

Source

2009-06-18 Carl Manaster

Vous avez un - (tiret) dans votre attribut de classe, mais un _ (trait de soulignement) dans votre sélecteur CSS.Est-ce une faute de frappe dans votre message ici, ou la façon dont votre code est réellement écrit? –

Merci, c'était une faute de frappe et je l'ai corrigé. Le code n'a pas eu cette erreur (il ne change pas l'alignement du texte lorsque le nom de la classe correspond). –

J'ai essayé ce code et il semble fonctionner très bien

<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>

Source

2009-06-18 22:11:33 Josh

Merci. Quand je l'utilise seul comme ça, ça marche aussi pour moi. Mon écran ne reste pas seul, cependant; il est intégré dans une «navigation» dans le cadre de la turbine apache - et je pense que vous m'avez indiqué ce qui pourrait être la source du problème. Si je retire mon HTML de son contexte, c'est OK. J'ai donc besoin de voir ce que ça veut dire dans le contexte. J'ai essayé, avec cette question, d'isoler le problème, mais ce faisant j'ai perdu le problème. –

Vous avez une faute de frappe dans votre sélecteur de classe.

RIGHT_JUSTIFIED et DROIT JUSTIFIE ne correspondront pas

Source

2009-06-18 21:50:11

Merci; cette faute de frappe a été corrigée, mais n'affecte pas le comportement curieux. –

Utilisez FireBug pour voir s'il y a un sélecteur plus spécifique remplaçant .RIGHT_JUSTIFIED.

Source

2009-06-18 22:04:42

Merci; FireBug me dit que ma classe RIGHT_JUSTIFIED est la spécification opérationnelle et que le text-align est donc "correct" - mais mes yeux me disent le contraire. –

Si un sélecteur ne fonctionne pas, il y a quelques tests rapides que vous pouvez faire pour isoler le problème. D'abord, j'essaye d'essayer un sélecteur plus spécifique pour voir si un sélecteur dans une partie différente du CSS surcharge vos styles. Par exemple,

body #problem { ... }

est plus spécifique que

#problem { ... }

Vous pouvez également ajouter! Propriété importante, qui donne la priorité de la propriété sur toutes les autres propriétés [presque], peu importe la façon dont ils beaucoup plus précis sont:

#problem { width:60px !important; }

Si aucun de ces travaux, il y a un problème plus profond, ou une faute de frappe sournoise. À ce stade, isoler complètement la section HTML et CSS (comme vous l'avez fait dans la réponse ci-dessus) est la plus efficace, mais aussi plus longue.

Source

2009-06-20 17:03:20

Comment puis-je anticiper quel type de sélecteur CSS va fonctionner?

Répondre

Questions connexes