css - 如何使用自定义类设置选项卡的样式？

Question

我有 5 个标签，我想使用自定义类将背景颜色设置为仅 Tab 4。基本上，我有一个名为 "myClass" 的类，我想在我的 CSS 代码中使用它。

定位元素(Tab 4)

有什么方法可以使用我的类来定位 Tab 4 吗？

这是我的工作代码:

PLUNKER

提前致谢!

注意:

• 使用自定义类的主要想法是这样我就不必使用 nth-child(4)。

• 使用我的自定义类 + PrimeNG 类是我正在寻找的。我只是不想用

  li:nth-child(4)
  

Answer 1

https://plnkr.co/edit/OYjprOc64lqkCRlqyYw4?p=preview

当你将 headStyleClass 放入括号中时 [headStyleClass] 它不会添加类名

所以需要改成headerStyleClass="myClass"

然后在你的CSS中

.ui-tabview .ui-tabview-nav > li.ui-state-default.myClass {
   background: red !important;
}

方案二

你可以像这样在你的html代码中制作特定的样式

<p-tabView>
    <p-tabPanel header="Header 1">
       Content 1
    </p-tabPanel>
    <p-tabPanel header="Header 2">
        Content 2
    </p-tabPanel>
    <p-tabPanel header="Header 3">
        Content 3    
    </p-tabPanel>
    <p-tabPanel header="Header 4" [headerStyle]="{'background': 'red'}">
        Content 4
    </p-tabPanel>
    <p-tabPanel header="Header 5">
        Content 5    
    </p-tabPanel>
</p-tabView>

https://plnkr.co/edit/v6gJg2mZQKypRI4Cyt4C?p=preview