Question

我正在尝试更改元素backgraund-image的{{1}}。它在h:commandButton内。

我使用以下规则制作了一个css文件：

RichFaces:panel

在xhtml文件中

.sButton
{
     background-image:url('../imgs/btnTexture2.jpg');
     background-repeat:repeat-x;
     color: white;
}

它不适用于RichFaces，但它适用于JSF。

当我在Chrome中查看时，我发现问题是文件<h:commandButton id="btnTest" styleClass="sButton" ...../>中的规则。我该如何避免这条规则？

如果我在skinning.ecss:31中定义style属性，它可以正常工作，但我不想将该样式放在xhtml文件中。

如何强制执行我的规则？如何在RichFaces中修改commandButton的背景？

Answer 1

我已经解决了这个问题。

我使用下一个CSS样式

input[type="button"].sButton
{
     background-image:url('../imgs/btnTexture2.jpg');
     background-repeat:repeat-x;
     color: white;
}

使用该规则可以更改背景图像。我没有必要在/view/stylesheet/theme.css" ;(无论这意味着什么）下使用＆＃34;样式定义。

像我说的那样问题是RichFace的风格更像是一个规则

.sButton
{
     background-image:url('../imgs/btnTexture2.jpg');
     background-repeat:repeat-x;
     color: white;
}

文件按下一个顺序应用

panel.ecss
skinning.ecss
myStyleFile.css

因为这个原因，我做了一个有两个条件的规则，以便有更多的优先权，这个改变的最终顺序是

myStyleFile.css
panel.ecss
skinning.ecss

这比我想象的要容易。