Question

我有5个标签，并希望使用自定义类将背景颜色设置为标签4 。基本上，我有一个名为＆＃34; myClass＆＃34; 的课程，并希望在我的css代码中使用它。

定位元素（表4）

有没有办法使用我的课程来定位Tab 4？

这是我的工作代码：

Completable#blockingGet()

提前多多感谢！

注意：

使用自定义类的主要想法是因为我不必使用nth-child（4）。
使用我的自定义类 + ，我正在寻找PrimeNG类。我只是不想使用
```
{{1}}
```

Answer 1

试试这个

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

这是您的自定义类.myClass

Answer 2

这是一个有效的吸虫：

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

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

您基本上必须调整第4个标签的制作方式：

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

Answer 3

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

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

3 个答案: