CSS 样式未在 JSF 页面上应用答案

【问题标题】：CSS style not getting applied on JSF pageCSS 样式未在 JSF 页面上应用
【发布时间】：2013-12-10 05:28:36
【问题描述】：

我创建了一个新的 css 文件并在其中添加了以下样式：

.op-label {
    color: orange;
}

我已经把这个文件'hms.css'放在了

"/webapp/resources"

文件夹。

我已将它包含在我的 JSF 模板文件 BasicTemplate.xhtml 中，如下所示：

<h:head>
    <title><ui:insert name="title">Basic Template</ui:insert></title>
    <h:outputStylesheet name="hms.css"/>
</h:head>

这是我如何在我的面孔页面中将这种样式与我的输出组件一起使用：

<p:outputLabel value="First Name" styleClass=".op-label"></p:outputLabel>

问题：样式未应用于呈现的 html。渲染后的 html 代码将其截断如下：

<head>

    <link href="/HMSWeb/javax.faces.resource/theme.css.xhtml?ln=primefaces-sunny" rel="stylesheet" type="text/css"></link>
    <link href="/HMSWeb/javax.faces.resource/hms.css.xhtml" rel="stylesheet" type="text/css"></link>
    <link href="/HMSWeb/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&v=4.0" rel="stylesheet" type="text/css"></link>
    <script src="/HMSWeb/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=4.0" type="text/javascript"></script>
    <script src="/HMSWeb/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=4.0" type="text/javascript"></script>
    <script src="/HMSWeb/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=4.0" type="text/javascript"></script>
    <title> … </title>

</head>

问题：这是什么原因？任何帮助将不胜感激。

谢谢！

【问题讨论】：

应该是styleClass="op-label"
不确定 jsf 但我认为你不应该在这里使用句号styleClass=".op-label"
@user876345，您的建议有效。非常感谢！
@Phantom 参考，很高兴为您提供帮助。在答案部分添加了我的解决方案。

标签： css jsf jsf-2

【解决方案1】：

尝试使用styleClass="op-label"

 <p:outputLabel value="First Name" styleClass="op-label"></p:outputLabel>

而不是

 <p:outputLabel value="First Name" styleClass=".op-label"></p:outputLabel>

【讨论】：

【解决方案2】：

正如 user876345 所建议的那样，删除句点应该是诀窍。所以，应该是这样的：

styleClass="op-label"

而不是

styleClass=".op-label"

【讨论】：

【解决方案3】：

只需尝试将完整的 URL 放入源中即可。例如：-

http://www.knowtheworld.in/ ..你的 css 路径 /HMSWeb/javax.faces.resource/hms.css.xhtml

【讨论】：

【解决方案4】：

只需尝试将完整的 URL 放入源代码中即可。例如：-http://www.theclickus.com/

【讨论】：

PS：堆栈交换渲染链接与rel="nofollow"。