Как я могу предвидеть, какой тип селектора CSS будет работать?

Я создаю форму с dojo, и я хочу поле ввода номера с ограниченным диапазоном. Поэтому я использую это:Как я могу предвидеть, какой тип селектора CSS будет работать?

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

Он работает, но он слишком широк, и содержимое выравнивается по левому краю.

Ни один из этих линий, добавил к моей входной элемент, не появляется, чтобы сделать разницу:

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

что вопрос сам по себе, но это нормально, я знаю, что я должен использовать CSS вместо HTML. Так что я добавить это в разделе Руководитель:

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

и это к входному элементу:

class    = "NARROW RIGHT_JUSTIFIED"

и решает ширину, но не выравнивание текста.

Чтобы решить выравнивание текста, я должен вместо этого:

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

Указание width собственности в input стиле не работает, либо.

Так что это мой вопрос. Почему в этом случае не работают встроенные стили, и почему я должен использовать селектор классов для ширины, но селектор элементов для выравнивания текста? И как я могу предвидеть, когда какой селектор будет применяться?

источник

2009-06-18 Carl Manaster

У вас есть - (тире) в атрибуте класса, но _ (подчеркивание) в селекторе css.Это опечатка в вашем посте здесь или то, как ваш код действительно написан? –

Спасибо, это была опечатка, и я ее исправил. Код не имел этой ошибки (он не меняет выравнивание текста при совпадении имени класса). –

я попробовал этот код и он, кажется, работает нормально

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

источник

2009-06-18 22:11:33 Josh

Спасибо. Когда я использую это в одиночку, это работает и для меня. Однако мой экран не одинок; он встроен в «навигацию» как часть инфраструктуры турбины apache - и, я думаю, вы указали мне, что может быть источником проблемы. Если я выведу свой HTML из контекста, все в порядке. Поэтому мне нужно посмотреть, что в этом контексте возится с ним. Я попытался с этим вопросом изолировать проблему, но при этом потерял проблему. –

У вас есть опечатка в вашем селекторе.

RIGHT_JUSTIFIED и выравниваются по правому краю не будет соответствовать

источник

2009-06-18 21:50:11

Спасибо; эта опечатка исправлена, но не влияет на любопытное поведение. –

Используйте FireBug, чтобы увидеть, если есть более конкретный селектор перекрывая .RIGHT_JUSTIFIED.

источник

2009-06-18 22:04:42

Спасибо; FireBug сообщает мне, что мой класс RIGHT_JUSTIFIED является оперативной спецификацией и поэтому выравнивание текста является «правильным», но мои глаза говорят мне иначе. –

Если селектор не работает, есть несколько быстрых тестов, которые можно сделать, чтобы локализовать проблему.

Во-первых, я пытаюсь использовать более конкретный селектор, чтобы увидеть, что селектор в другой части CSS переопределяет ваши стили. Например,

body #problem { ... }

более специфичен, чем

#problem { ... }

Вы также можете добавить! Важное свойство, которое не дает свойство приоритет над [почти] все другие свойства, независимо от того, сколько более конкретно они являются:

#problem { width:60px !important; }

Если ни одна из этих работ, есть либо более глубокий вопрос, или подлая опечатка. На этом этапе полная изоляция раздела HTML и CSS (как вы уже сделали в ответе выше) является наиболее эффективной, но также более трудоемкой.

источник

2009-06-20 17:03:20

Как я могу предвидеть, какой тип селектора CSS будет работать?

ответ

Смежные вопросы