css - primefaces 样式仅适用于嵌套元素

Question

为了移除 Primefaces TabView 组件的 Tab 内的填充，我在我的 css 文件上创建了一个新样式:

.tabviewleft .ui-tabs .ui-tabs-panel {
    padding: 0px 0px;
}

然后我尝试将这种新样式应用到选项卡上。但它没有用:

<p:tab id="fieldCategoryTab" title="category" styleClass="tabviewleft" >

然后我尝试在 TabView 组件上应用。但它也没有用:

<p:tabView id="tabViewLeft" styleClass="tabviewleft">  

然后我在 TabView 之外创建了一个 div，它起作用了:

<div id="teste" class="tabviewleft">

为什么我需要在 TabView 之外创建一个 div 来应用样式？

是否可以在不创建 div 的情况下将其直接应用于 Tab 或 TabView？

预先感谢您的任何解释。

Answer 1

是的，这是可能的。 假设你的 <p:tabView>的结构是这样的:

<p:tabView id="tabView" styleClass="tabView" dynamic="true" 
    cache="false"> 

    <p:tab title="#{trhBundle['paidLeave']}" id="paid">
       <h:form>
       </h:form>
    </p:tab>

    <p:tab title="#{trhBundle['RTT']}" id="rtt">
       <h:form>
       </h:form>
    </p:tab>

    <p:tab title="#{trhBundle['specialLeave']}" id="special">
       <h:form>
       </h:form>
    </p:tab>
</p:tabView>

然后添加css

.tabView .ui-tabs-panel {
padding: 0px!important;
}

我认为这将删除 <p:tab> 的所有填充.