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

Question

确切地说，我该怎么做？尝试：

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

和我的 CSS：

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

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

<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>

Answer 1

您可以headerClass设置h:column：

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

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

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

.customHeader {/**/}

或将其从后代更改为element.class

th.customHeader {/**/}