css - 背景颜色 css 未申请 ace :textEntry

Question

我正在使用 icefaces 3.2。我的输入框有一个 CSS 问题。我有一个文本条目，如下所示

                <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 调试器时，我注意到实际的 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/

鉴于您的选择器可能被覆盖，您有两个选择:

1. 为您的选择器提供比其他选择器更高的特异性(如上所述)，例如:
   .container .requiredField { ... }

2. 使用 !important覆盖应用于该元素的所有其他样式，例如
   color: red !important; . 注意:我只是建议这样做，因为它适合样式的目的(验证)。这应该谨慎使用，因为它会导致多次覆盖的长期维护问题。

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