如何更改 <f:facet> 标题的颜色？答案

【问题标题】：How to change the color of <f:facet> header?如何更改 <f:facet> 标题的颜色？
【发布时间】：2014-10-08 18:25:54
【问题描述】：

没错，我该怎么做？试过了：

<f:facet id="form" name="header" class="customHeader">
   <h:outputText value="HELLO!"/>
</f:facet>

还有我的 CSS：

.customHeader th{
    background-color:  activeborder;
    background-image: none;
}

我记得在 JSF 页面中包含 CSS 文件：

<link type="text/css" ref="stylesheet" href="./newcss.css"/>

但没有结果，我无法更改标题颜色，我根本看不到任何变化。有什么帮助吗？

这是生成的 HTML 代码：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
        <title>Facelet Title</title>
        <link type="text/css" 
              ref="stylesheet" 
              href="./newcss.css" />
    </head
    ><body>
        <form id="j_idt5" 
              name="j_idt5" 
              method="post" 
              action="/HTableJSF/faces/newjsf.xhtml" 
              enctype="application/x-www-form-urlencoded">
            <input type="hidden" name="j_idt5" value="j_idt5" />
            <table style="background-color: black">
                <thead>
                    <tr>
                        <th colspan="1" scope="colgroup">HELLO!</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <span class="row1">HELLO</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <input type="hidden" 
                   name="javax.faces.ViewState" 
                   id="j_id1:javax.faces.ViewState:0" 
                   value="-3603525257247985306:-5087066467544098625" 
                   autocomplete="off" />
        </form>
    </body>
</html>

【问题讨论】：

检查响应的 HTML 结构。检查是否确实包含样式表 (body{background-color:red;})。

标签： css jsf facets

【解决方案1】：

你可以在h:column上设置headerClass：

<h:column headerClass="customHeader">
    <f:facet name="header">
        HELLO!
    </f:facet>
</h:column>

在这种情况下，将生成特定列<th class="customHeader">。

因此，您需要更改 css 选择器。要么删除th：

.customHeader {/**/}

或将其从 descendant 更改为 element.class

th.customHeader {/**/}

【讨论】：

非常感谢，我找这个很久了。

【解决方案2】：

我认为你必须将你的 CSS 类 (class="customHeader") 放在上面的一个组件中

例如：

<p:panel styleClass="customHeader">
  <f:facet name="header">
    ....
  </f:facet>
</p:panel>

或

<p:column styleClass="customHeader">
  <f:facet name="header">
    ....
  </f:facet>
</p:panel>

【讨论】：

【解决方案3】：

您在哪个浏览器/系统中工作？

activeborder 是默认活动边框的颜色。但是考虑到命名系统颜色在 CSS3 中已被弃用，因此不是标准的。您不能确定是否所有操作系统都支持所有定义的系统颜色。

尝试类似：

background-color: cyan;

或

background-color: #00FFFF;

【讨论】：

试过 FF 和 Chromium。改成青色，没有结果