p：功能区覆盖微调器的按钮背景

Question

PrimeFaces 5.1中的新<p:ribbon>组件使用类background .ui-ribbon（ribbon.css）覆盖了微调器组件按钮的.ui-button属性，这使得微调器看起来像像这样：

.ui-ribbon .ui-button {
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   color: #333;
}

在浏览器中禁用后台规则时，微调器看起来很完美

如何编写我的CSS以使其忽略.ui-ribbon .ui-button上的背景定义，以便它可以继续使用主题背景定义？

Answer 1

您应该尝试以下方法：

.ui-spinner.ui.ribbon .ui-button {
  background: none!important;
}

OR 如果.ui-spinner是一个容器元素：

.ui-spinner .ui-ribbon .ui-button {
  background: none !important;
}

基本上，这说的是当spinner也是ribbon时，即使它已经定义，也不要在button上显示背景

在第二种情况下，它说当button是ribbon的孩子，同时也是spinner的孩子，那么就不会显示背景即使它已经定义了。

---

编辑：

啊，所以你担心会覆盖之前应用的背景。更有意义。在这种情况下，将上面的CSS更改为：

.ui-spinner.ui.ribbon .ui-button {
  background: inherit!important;
}

OR 如果.ui-spinner是一个容器元素：

.ui-spinner .ui-ribbon .ui-button {
  background: inherit!important;
}