如何使用自定义类设置Tab的样式？

Question

我有5个选项卡，并希望使用自定义类将背景颜色设置为Tab 4。基本上，我有一个名为“myClass”的类，并希望在我的css代码中使用它。

定位元素（表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

Answer 2

试试这个吧

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

这是你的自定义类.myClass

Answer 3

这是一个有效的plunker：

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

它只使用.myClass { background-color: #f00 !important; }

你基本上必须调整第四个标签的方式如下：

<p-tabPanel header="Header 4" headerStyleClass='myClass'>