css - 更改 commandButton 标签样式

Question

我有一个 Primefaces 命令按钮

<p:commandButton value="..." action="..." styleClass="myButton"/>

自定义CSS类

.mybutton{
     margin-left: 10px;
     margin-bottom: 10px;
     width: 200px;
}

我想覆盖按钮标签类的一些属性，即

.ui-button-text-icon-left .ui-button-text

为了仅自定义“mybutton”类的标签而不是我的网络应用程序中的所有按钮，我应该写什么？

---

我正在使用 JSF2.2、PF 5.2

Answer 1

如果您希望您的规则只影响具有所有提到的类的按钮，请使用此

.mybutton.ui-button-text-icon-left.ui-button-text {
     margin-left: 10px;
     margin-bottom: 10px;
     width: 200px;
}

<p:commandButton>呈现为 <button>嵌套 <span>其中包含一个标签。像这样

<button ... class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-priority-primary mybutton" ...>
    <span class="ui-button-text ui-c">My button</span>
</button>

所以，如果您真的想为标签设置样式，那么 CSS 规则应该是

.mybutton .ui-button-text {
     margin-left: 10px;
     margin-bottom: 10px;
     width: 200px;
}

这样，它的目标是具有类 ui-button-text 的组件它嵌套在类 mybutton 的组件下.