如何用CSS定位PrimeNG p-dropdown中的首个选项？

方法一：通过自定义选项模板添加专属类（最可靠） #

PrimeNG的p-dropdown支持通过pTemplate="item"自定义每个选项的渲染内容，你可以给特定选项单独添加CSS类，再针对这个类写样式：

1. 修改组件模板：

<p-dropdown id="dropdown" [options]="options" optionLabel="name" optionValue="name">
  <ng-template pTemplate="item" let-option>
    <span [class.custom-single-option]="option.name === '目标选项名称'">{{option.name}}</span>
  </ng-template>
</p-dropdown>

这里通过判断选项的name（或业务里的唯一标识字段），给目标选项加上custom-single-option类。

2. 编写CSS样式（无需::ng-deep，类是自定义的）：

.custom-single-option {
  background-color: #e3f2fd;
  color: #1976d2;
  /* 你的自定义样式 */
}

方法二：基于索引定位（注意下拉菜单结构） #

如果要定位第N个选项，之前选择器失效是因为PrimeNG的下拉菜单（.p-dropdown-panel）是动态生成的overlay元素，不在当前组件DOM层级内，需要调整样式穿透写法：

::ng-deep .p-dropdown-panel .p-dropdown-item:nth-child(2) {
  /* 这里nth-child(2)对应第二个选项，若开启过滤功能，第一个元素是过滤输入框，需调整索引 */
  background-color: #ffebee;
  color: #c62828;
}

注意：如果p-dropdown开启了过滤（[filter]="true"），下拉面板第一个元素是过滤输入框，选项索引要+1，比如第一个选项对应nth-child(2)。

方法三：给选项数据添加样式字段 #

可以在options数组里给目标选项添加styleClass字段，PrimeNG会自动把这个类应用到对应选项上：

1. 修改options数组：

options = [
  { name: '选项1' },
  { name: '目标选项', styleClass: 'custom-option' },
  { name: '选项3' }
];

2. 编写样式：

::ng-deep .custom-option {
  /* 你的自定义样式 */
}

内容的提问来源于stack exchange，提问作者Aria