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

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

以元素为目标（表4）

是否有任何方法可以使用我的类来定位选项卡4

这是我的工作代码：

提前多谢

注意：

• 使用自定义类的主要思想是不必使用第n个子类（4）
• 使用我的自定义类+我正在寻找的是priming类。我只是不想用

  li:nth-child(4)
  

---

试试这个

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

---

这是您的自定义类

。myClass

试试这个

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

---

这是您的自定义类

。myClass

这是一个可用的plunker：

它只使用

.myClass{背景色：#f00！重要；}

基本上，您必须将第四个选项卡的制作方式调整为以下内容：

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

---

这里有一个可以使用的plunker：

它只使用

.myClass{背景色：#f00！重要；}

基本上，您必须将第四个选项卡的制作方式调整为以下内容：

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

当您将

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>

内容1
内容2
内容3
内容4
内容5

当您将

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>

内容1
内容2
内容3
内容4
内容5

---

---

所以你只想把最后4个选对。？那么它是否需要动态，这样当你点击一个孩子时，它就会失去颜色。@weBBer我只想给标签4上色。如果你看我的扑克牌，你会发现它已经做好了。我只想更新我的css以使用我的自定义类“myClass”来定位Tab 4。你知道如何实现吗？所以你只想给用户选择的标签上色。？我说的对吗？我不在乎其他标签。我只想为选项卡4设置一个背景色，这就是我想要的。所以您想将

.myClass

动态添加到第四个选项卡。？？这是你在问的吗？所以你只想把最后4个写对。？那么它是否需要动态，这样当你点击一个孩子时，它就会失去颜色。@weBBer我只想给标签4上色。如果你看我的扑克牌，你会发现它已经做好了。我只想更新我的css以使用我的自定义类“myClass”来定位Tab 4。你知道如何实现吗？所以你只想给用户选择的标签上色。？我说的对吗？我不在乎其他标签。我只想为选项卡4设置一个背景色，这就是我想要的。所以您想将

.myClass

动态添加到第四个选项卡。？？是你在问吗？我刚试过，似乎不起作用。你能和我一起吃一杯吗？谢谢您是否将自定义类添加到第四个选项卡？？像这样？？谢谢你的意见，兄弟！我刚试过，但似乎不起作用。你能和我一起吃一杯吗？谢谢您是否将自定义类添加到第四个选项卡？？像这样？？谢谢你的意见，兄弟！我需要使用[headerStyleClass]，而不是headerStyleClass，因为我将绑定一个值。你能更新你的css，让它使用myClass和Priming类来定位元素吗？ThanksApologies，我不熟悉plunker，但问题是

headerStyleClass='myClass'

将类

myClass

应用于选项卡，因此它可以用作CSS选择器，但

[headerStyleClass]='myClass'

实际上并没有将其作为类或属性添加到选项卡中。我需要使用[headerStyleClass]而不是headerStyleClass，因为我将绑定一个值。你能更新你的css，让它使用myClass和Priming类来定位元素吗？感谢各位，我对plunker并不熟悉，但问题是

headerStyleClass='myClass'

将类

myClass

应用于选项卡，因此它可以用作CSS选择器，但

[headerStyleClass]='myClass'

实际上并没有将其作为类或属性添加到选项卡中。