我如何预测哪种类型的CSS选择器可以工作？_Css_Dojo

我如何预测哪种类型的CSS选择器可以工作？

css dojo

我如何预测哪种类型的CSS选择器可以工作？,css,dojo,Css,Dojo,我正在用dojo创建一个表单，我想要一个范围受限的数字输入字段。所以我用这个： <input id = "sample_input" type = "text" dojoType = "dijit.form.NumberTextBox" name = "sample_input" value = "27" constraints = "{mi

我正在用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."
/>

这本身就是个问题，但没关系，我知道我应该使用CSS而不是HTML。因此，我在标题部分添加了以下内容：

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

这解决了宽度问题，但没有解决文本对齐问题

为了解决文本对齐问题，我必须这样做：

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


.窄{宽度：60px；}
输入{文本对齐：右；}

在

输入

样式中指定

宽度

属性也不起作用

这就是我的问题。为什么内联样式在这种情况下不起作用，为什么我必须对宽度使用类选择器，而对文本对齐使用元素选择器？我如何预测哪个选择器何时适用？

您的类选择器中有一个输入错误

右对齐和右对齐将不匹配

您的类选择器中有一个输入错误

右对齐和右对齐将不匹配

用于查看是否有更具体的选择器覆盖

。右对齐

用于查看是否有更具体的选择器覆盖

。右对齐

我尝试了此代码，它似乎工作正常

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


.width_窄{宽度：60px；}
.align_right{text align:right；}

我试过这段代码，似乎效果不错

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


.width_窄{宽度：60px；}
.align_right{text align:right；}

如果选择器不起作用，可以进行一些快速测试来隔离问题

首先，我尝试使用一个更具体的选择器，看看CSS不同部分中的选择器是否覆盖了您的样式。比如说,

body #problem { ... }

比

#problem { ... }

您还可以添加！重要属性，使属性优先于[几乎]所有其他属性，无论它们有多具体：

#problem { width:60px !important; }

如果这两种方法都不奏效，那要么是更深层次的问题，要么是一个鬼鬼祟祟的打字错误。在这个阶段，完全隔离HTML和CSS部分（正如您在上面的回答中所做的）是最有效的，但也更耗时

如果选择器不起作用，可以进行一些快速测试来隔离问题

首先，我尝试使用一个更具体的选择器，看看CSS不同部分中的选择器是否覆盖了您的样式。比如说,

body #problem { ... }

比

#problem { ... }

您还可以添加！重要属性，使属性优先于[几乎]所有其他属性，无论它们有多具体：

#problem { width:60px !important; }

在类属性中有一个-（破折号），但在css选择器中有一个(下划线)。这是你的文章中的一个输入错误，还是你的代码的实际编写方式？谢谢，这是一个输入错误，我已经更正了。代码没有此错误（当类名匹配时，它不会更改文本对齐方式）。类属性中有一个-（破折号），但css选择器中有一个(下划线)。这是你的文章中的一个输入错误，还是你的代码的实际编写方式？谢谢，这是一个输入错误，我已经更正了。代码没有此错误（当类名匹配时，它不会更改文本对齐方式）；此拼写错误已更正，但不会影响好奇的行为。谢谢；此拼写错误已更正，但不会影响好奇的行为。谢谢。当我像那样单独使用它时，它对我也很有用。然而，我的屏幕并不是孤立的；它作为apache turbine框架的一部分嵌入到“导航”中——我想您已经指出了问题的根源。如果我把HTML从上下文中去掉，就可以了。所以我需要看看上下文中是什么在搞乱它。我试图用这个问题来隔离问题，但这样做就失去了问题。谢谢。当我像那样单独使用它时，它对我也很有用。然而，我的屏幕并不是孤立的；它作为apache turbine框架的一部分嵌入到“导航”中——我想您已经指出了问题的根源。如果我把HTML从上下文中去掉，就可以了。所以我需要看看上下文中是什么在搞乱它。我试图用这个问题来孤立问题，但这样做就失去了问题；FireBug告诉我，我的右对齐类是操作规范，因此文本对齐是“正确的”-但我的眼睛告诉我不是这样；FireBug告诉我，我的右对齐类是操作规范，因此文本对齐是“正确的”——但我的眼睛告诉我不是这样。