css - 无法删除 accordionPanel 选项卡 primefaces 中的顶部白线

Question

我试图用 css 删除 Accordion 选项卡的顶行，但没有成功。以下是我的代码片段。我尝试了几种 css 样式，但它没有响应。请教如何删除 Accordion 中每个选项卡上方的默认栏。

        <div class="ui-g" style="margin-left: 40px ;background:#A9A9A9;width: 80% ">
                        <p:accordionPanel activeIndex="null" style="width: 80% ;">
                            <p:tab title="Analysis" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}"  onclick="PFE('ppanel').toggle()"  update=":mainForm:content"/> 
                            </p:tab>
                            <p:tab title="Overview" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/> 
                            </p:tab>
                            <p:tab title="Analysis" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/> 
                            </p:tab>
                            <p:tab title="Charts" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/> 
                            </p:tab>
                            <p:tab title="Export" titleStyle="background:#A9A9A9;color:black;width:100px;border-style:none;outline:none;">
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Overview" actionListener="#{bean.setPage('page1')}" update=":mainForm:content"/>
                                <p:commandButton  style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/>
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Export" actionListener="#{bean.setPage('page3')}" update=":mainForm:content"/> 
                                <p:commandButton   style="background:#A9A9A9;color: black;width:100px;border-style: none;padding: 0px;outline:none;" value="Analysis" actionListener="#{bean.setPage('page2')}" update=":mainForm:content"/> 
                            </p:tab>
                        </p:accordionPanel>
                    </div>

     <h:outputStylesheet id="layoutCSS">  
        .ui-accordion .ui-accordion-content{
        background:#A9A9A9;
        }
        .ui-button{
        display:none !important;
        }
    </h:outputStylesheet> 

Answer 1

试试这个选择器

.ui-accordion .ui-accordion-header {
    border-top: none;
}

或者如果你只需要为事件标签隐藏它，你可以使用这个

.ui-accordion .ui-accordion-header.ui-state-active {
    border-top: none;
}