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

您可以在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 {/**/}

Answer 2

我认为你必须将你的CSS类（class =“customHeader”）放在facet上面的一个组件

例如：

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

或

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

Answer 3

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

activeborder是默认活动边框的颜色。但请考虑在CSS3中不推荐使用命名系统颜色，因此不是标准配置。您无法确定所有操作系统是否支持所有已定义的系统颜色。

尝试类似：

background-color: cyan;

或

background-color: #00FFFF;

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

3 个答案: