Wie kann ich vorhersagen, welcher Typ von CSS-Selektor funktioniert?

Ich erstelle ein Formular mit Dojo, und ich möchte ein Bereich-beschränkte Anzahl Eingabefeld. So verwende ich diese:Wie kann ich vorhersagen, welcher Typ von CSS-Selektor funktioniert?

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

Es funktioniert, aber es ist zu breit, und der Inhalt wird linksbündig.

Keines dieser Zeilen zu meinem INPUT-Element hinzugefügt haben, wird einen Unterschied machen:

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

, die eine Frage an und für sich ist, aber das ist OK, ich weiß, ich sollte anstelle der Verwendung von CSS werden HTML. So füge ich dies im HEAD-Bereich:

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

und diese an das Eingangselement:

class    = "NARROW RIGHT_JUSTIFIED"

und löst die Breite, nicht aber die Textausrichtung.

die Textausrichtung zu lösen, muss ich diese stattdessen tun:

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

die width Eigenschaft im input Stil angeben, funktioniert auch nicht.

Das ist also meine Frage. Warum funktionieren Inline-Stile in diesem Fall nicht, und warum muss ich einen Klassenselektor für die Breite verwenden, aber einen Elementselektor für die Textausrichtung? Und wie kann ich voraussehen, wann welcher Selektor anwendbar ist?

Quelle

2009-06-18 Carl Manaster

Sie haben ein - (Bindestrich) in Ihrem Klassenattribut, aber ein _ (Unterstrich) in Ihrem CSS-Selektor.Ist das ein Tippfehler in Ihrem Post hier oder wie wird Ihr Code tatsächlich geschrieben? –

Danke, es war ein Tippfehler und ich habe es korrigiert. Der Code hatte diesen Fehler nicht (die Textausrichtung wird nicht geändert, wenn der Klassenname übereinstimmt). –

habe ich versucht, diesen Code und es scheint

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

Quelle

2009-06-18 22:11:33 Josh

Danke. Wenn ich es so alleine benutze, funktioniert es auch für mich. Mein Bildschirm steht jedoch nicht alleine. Es ist in eine "Navigation" als Teil des Apache-Turbinentrahmenwerks eingebettet - und ich denke, Sie haben mich darauf hingewiesen, was die Ursache des Problems sein könnte. Wenn ich meinen HTML-Code aus dem Kontext nehme, ist das OK. Also muss ich sehen, was im Kontext damit zu tun hat. Ich versuchte mit dieser Frage das Problem zu isolieren, verlor dabei aber das Problem. –

Sie haben einen Tippfehler in Ihrer Klassenauswahl.

RIGHT_JUSTIFIED und rechtsbündigen nicht

Quelle

2009-06-18 21:50:11

Vielen Dank; Dieser Tippfehler wurde korrigiert, beeinflusst aber nicht das merkwürdige Verhalten. –

Verwenden passen FireBug zu sehen, ob es eine spezifischere Selektor .RIGHT_JUSTIFIED überschrieben ist.

Quelle

2009-06-18 22:04:42

Vielen Dank; FireBug sagt mir, dass meine RIGHT_JUSTIFIED-Klasse die operative Spezifikation ist und dass die Textausrichtung also "richtig" ist - aber meine Augen sagen mir etwas anderes. –

zu funktionieren Wenn ein Wähler nicht funktioniert, gibt es ein paar schnelle Tests sind Sie das Problem isolieren tun können.

Zuerst versuche ich einen spezifischeren Selektor, um zu sehen, ob ein Selektor in einem anderen Teil des CSS deine Stile überschreibt. Zum Beispiel

body #problem { ... }

ist spezifischer als

#problem { ... }

können Sie auch noch die! Wichtige Eigenschaft, die die Eigenschaft haben Vorrang vor [fast] alle anderen Eigenschaften, egal wie viel spezifischere sie gibt sind:

Wenn keiner von denen funktioniert, gibt es entweder ein tieferes Problem oder einen hinterhältigen Tippfehler. In diesem Stadium ist das vollständige Isolieren des HTML- und CSS-Bereichs (wie in der obigen Antwort) am effektivsten, aber auch zeitaufwendig.

Quelle

2009-06-20 17:03:20

Wie kann ich vorhersagen, welcher Typ von CSS-Selektor funktioniert?

Antwort

Verwandte Themen