css - 如何在primeng的ConfirmDialog模式中设置确认按钮的样式？

Question

在使用 ConfirmDialog 时，我对如何在 Angular 的 primeng 库中设置 2 个“确认”和“取消”按钮的样式感到困惑。

参考：https ://www.primefaces.org/primeng/#/confirmdialog

我想让“确认”按钮保持绿色，并将“取消”按钮的样式更改为红色。更改 css 中的样式：

.ui-widget-header .ui-button、.ui-widget-content .ui-button、.ui-button

改变两个按钮的颜色。有没有解决的办法？

Answer 1

您可以使用 CSS Adjacent Sibling Selector来定位按钮，这假设只有两个按钮，确认和取消：

.ui-dialog-footer .ui-button {
    background: /* some green color */
}

.ui-dialog-footer .ui-button + .ui-button {
    background: /* some red color */
}

.ui-dialog-footer在您提供的链接中尝试演示时，这些按钮似乎位于带有 CSS 类的容器 div中。但是，如果您的实现在不同的容器/命名空间中有按钮，您可以替换.ui-dialog-footer为您需要的任何内容，以防止样式影响应用程序中的所有按钮。

这是一个演示实际功能的jsfiddle。

希望这会有所帮助！