CSS 定位 p-dropdown primeng 中的第一个选项

Question

我在我的应用程序中使用 primeng，我只想自定义 p 下拉列表中的一个选项，但不知道如何去做。

<p-dropdown id="dropdown" [options]="options" optionLabel="name" optionValue="name"></p-dropdown>

我有这个作为我的CSS：

p-dropdown ::ng-deep .p-dropdown-item {
    /* my custom css for one option only */
}

我尝试使用 :first, :first-child, :first-of-type, :nth-child, :nth-of-type 来看看我是否可以只定位一个选项，但它仍然将 css 应用于所有下拉菜单中的选项。我该怎么办？

PS：这个问题与 select 元素无关，与 primeng p-dropdown 元素有关。请完整阅读问题。

Answer 1

请注意，有

p-dropdownitem

元素和

p-dropdown-item

CSS 类：

<p-dropdownitem ...>
  <li class="p-dropdown-item" ...>
    <span ...>LABEL</span>
  </li>
</p-dropdownitem>

所以，

:first-item

应该应用于该元素，而不是其具有该类的子元素：

p-dropdown ::ng-deep p-dropdownitem:first-child .p-dropdown-item {
  /* my custom css for one option only */
}

希望这有帮助:)