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

Question

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

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

然后我尝试将这种新样式应用到 Tab。但它没有用：

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