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

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

0 голосов
/ 19 июня 2009

Я создаю форму с помощью dojo и хочу поле ввода чисел с ограниченным диапазоном. Поэтому я использую это: 

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

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

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

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

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

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

и это для элемента INPUT: 

class              = "NARROW RIGHT_JUSTIFIED"

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

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

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

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

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

Ответы [ 4 ]

1 голос
/ 20 июня 2009

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

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

body #problem { ... }

более конкретно, чем 

#problem { ... }

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

#problem { width:60px !important; }

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

1 голос
/ 19 июня 2009

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

1 голос
/ 19 июня 2009

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

<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>
1 голос
/ 19 июня 2009

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

RIGHT_JUSTIFIED и RIGHT-JUSTIFIED не будут совпадать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...