Question

我正在使用icefaces 3.2。我的输入框有css问题。我有一个textentry，如下所示

                <ace:textEntry id="custName" value="#{strformbean.customer1.custName}"   size="20" maxlength="50"  label="Customer Name"
                     required="true"  styleClass="requiredField" />

  <style type="text/css" >
    .requiredField{
        background: rgb(255,239,214) ;
        border-color:Gray   ;
    }
</style>

styleClass =“requiredField”应该改变hte textentry的背景颜色。但它没有得到应用。当我使用IE CSS Debugger时，我注意到实际的html源代码如下

<input name="form:custName_input" class="ui-inputfield ui-textentry ui-widget ui-state-default ui-corner-all ui-state-required requiredField" id="form:custName_input" role="textbox" aria-required="true" type="text" size="20" maxLength="50" jQuery17104644470378519651="44"/>

在我的css规则之前，

有很多css规则应用于此输入框。我的规则中的背景样式显示为stroked out，这意味着还有一些其他规则适用于背景。

Answer 1

首先，如果可能的话，我建议使用带有更好开发者工具的浏览器。 Chrome，Safari，Opera和Firefox都有出色的工具，可以更加详细地说明样式的来源和被覆盖的内容。它们还允许您即时切换，修改和添加新样式。

在您的情况下，考虑到应用于输入字段的其他类的数量，您的类.requiredField极有可能被具有更高特异性的选择器覆盖。例如，以下规则：

.requiredField {
    color: rgb(255,239,214); 
}

将被这一个覆盖：

.container .requiredField {
    color: black; 
}

Chris Coyier撰写了一篇很棒的文章，更详细地解释了这个主题：http://css-tricks.com/specifics-on-css-specificity/

鉴于你的选择器可能被覆盖，你有两个选择：

为您的选择器提供比其他选择器更高的特异性（如上所述），例如：
.container .requiredField { ... }
使用!important覆盖应用于该元素的所有其他样式，例如
color: red !important;。 注意：我只建议这个，因为它适合样式（验证）的目的。这应该谨慎使用，因为它可能导致多个覆盖的长期维护问题。

在这两种情况下，确切了解其他样式的应用非常重要，这样您才能使用最佳解决方案。例如，任意向选择器添加ID和类以覆盖其他样式并不是一个好主意，因为这会导致同样的问题。我还建议不要使用<style>在文档中放置样式。虽然它非常有效，但它很难跟踪CSS并且通常被认为是不好的做法。最好使用<link>标记链接到外部样式表。

背景颜色css未应用于ace：textEntry

1 个答案: