css - 如何为 rich :tabPanel 中的选项卡添加背景颜色

Question

我添加了 rich:tabPanel 并为 tabPanel 应用了样式。但是无法为 tabPanel 中的选项卡添加背景颜色。有人可以告诉 rich:tab 的 styleClass

XML

<td width="80%" height="100%" style="vertical-align: top;"><rich:tabPanel
                                id="tabId" switchType="ajax" >
                                <rich:tab id="section1">
                                    <ui:include src="/pages/design/hrms/Section1.xhtml" />
                                </rich:tab>
                                <rich:tab id="section2" header="#{msg.lbl_section2}">
                                    <ui:include src="/pages/design/hrms/Section2.xhtml" />
                                </rich:tab>
                                <rich:tab id="section3" header="#{msg.lbl_section3}">
                                    <ui:include src="/pages/design/hrms/Section3.xhtml" />
                                </rich:tab>
                                <rich:tab id="section4" header="#{msg.lbl_section4}">
                                    <ui:include src="/pages/design/hrms/Section4.xhtml" />
                                </rich:tab>
                                <rich:tab id="section5" header="#{msg.lbl_section5}">
                                    <ui:include src="/pages/design/hrms/Section5.xhtml" />
                                </rich:tab>
                                <rich:tab id="section6" header="#{msg.lbl_section6}">
                                    <ui:include src="/pages/design/hrms/Section6.xhtml" />
                                </rich:tab>
                                <rich:tab id="section7" header="#{msg.lbl_section7}">
                                    <ui:include src="/pages/design/hrms/Section7.xhtml" />
                                </rich:tab>
                                <rich:tab id="section12" header="#{msg.lbl_section12}">
                                    <ui:include src="/pages/design/hrms/Section12.xhtml" />
                                </rich:tab>
                                <rich:tab id="section13" header="#{msg.lbl_section13}">
                                    <ui:include src="/pages/design/hrms/Section13.xhtml" />
                                </rich:tab>
                                <rich:tab id="section14" header="#{msg.lbl_section14}">
                                    <ui:include src="/pages/design/hrms/Section14.xhtml" />
                                </rich:tab>
                            </rich:tabPanel></td>

样式.css

.rf-tab-hdr-spcr {
    background: rgb(255, 255, 255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, rgba(255,
        255, 255, 1) ), color-stop(35%, rgba(255, 255, 255, 1) ),
        color-stop(100%, rgba(161, 214, 255, 1) ) ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% ); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% ); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(             startColorstr='#ffffff',
        endColorstr='#a1d6ff', GradientType=0 ); /* IE6-9 */
}

Answer 1

如果您使用 Firebug 进行验证，您可能会注意到您的 CSS 已被 RichFaces 样式覆盖，因为您的 CSS 并不那么重要。

一种简单的更改方法是为您的 h:form 包装器设置一个 id 并将其添加到您的 CSS 中:

<h:form id="myForm">
    <!-- code -->

    <rich:tabPanel>
        <!-- code -->
    </rich:tabPanel>

    <!-- code -->
</h:form>

还有你的 style.css :

#myForm .rf-tab-hdr-spcr {
    /* your css */
}