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

StackOverflow https://stackoverflow.com/questions/1015341

  •  06-07-2019
  •  | 
  •  

题

我正在创建一个带有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>

在 input 样式中指定 width 属性也不起作用。

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

有帮助吗？

解决方案

我试过这段代码，似乎工作正常

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

其他提示

您的班级选择器中有拼写错误。

RIGHT_JUSTIFIED和RIGHT-JUSTIFIED将不匹配

如果选择器不起作用，可以通过几个快速测试来隔离问题。

首先，我尝试尝试更具体的选择器，以查看CSS的不同部分中的选择器是否覆盖了您的样式。例如，

body #problem { ... }

比

更具体 
#problem { ... }

你也可以添加！important属性，它赋予属性优先于[几乎]所有其他属性，无论它们有多具体：

#problem { width:60px !important; }

如果这些都不起作用，那么要么是更深层次的问题，要么是偷偷摸摸的错字。在这个阶段，完全隔离HTML和CSS部分（正如您在上面的答案中所做的那样）是最有效的，但也更耗时。

使用 FireBug 查看是否有更具体的选择器覆盖 .RIGHT_JUSTIFIED 。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top