PrimeNG树组件选中项高亮优化：自定义样式实现问询

背景说明 #

PrimeNG p-tree默认的浅蓝色边框高亮，本质是节点内可点击区域获得焦点时的outline样式。针对你提到的DOM中无专属选中类/属性的情况，可通过以下原生CSS选择器实现自定义样式，无需手动添加类：

方案1：基于焦点状态的即时高亮（无selectionMode时适用） #

当点击节点后，节点内的内容区域会获得焦点，利用:focus-within选择器给整个节点容器添加背景色：

.p-tree .p-tree-node:focus-within {
    background-color: #e0e0e0; /* 自定义灰色背景，可按需调整 */
    outline: none; /* 移除默认的浅蓝色边框 */
}

方案2：精准控制内容区域的焦点样式 #

直接选中节点内的可点击内容元素，覆盖其焦点样式：

.p-tree .p-tree-node-content:focus {
    background-color: #e0e0e0;
    outline: none;
    border-radius: 4px; /* 可选：添加圆角优化视觉效果 */
}

方案3：持久化选中样式（开启selectionMode时适用） #

如果你的树组件设置了selectionMode="single"或"multiple"，选中的节点会自动添加.p-tree-node-selected类（可能你之前没留意到这个类），此时可以直接针对这个类设置样式：

.p-tree .p-tree-node-selected > .p-tree-node-content {
    background-color: #e0e0e0;
    outline: none;
}

注意事项 #

• 若未开启selectionMode，点击节点仅触发焦点状态，刷新或点击其他区域后样式会消失；
• 开启selectionMode后，选中状态会通过组件内置的绑定持久化，.p-tree-node-selected类会稳定存在于选中节点上；
• 检查DOM时，可右键选中节点，查看p-tree-node-content元素的:focus状态，或节点容器的类列表。

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