0

我正在使用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 ，这意味着还有一些其他规则正在应用背景。

4

1 回答 1

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>最好使用标签链接到外部样式表。

于 2013-01-22T16:24:38.367 回答