jsf - JSF 消息的不同 CSS 样式

Question

在 JSF 中，我在我的 xhtml 文件中包含了以下行:

<h:panelGroup id="messageHeader">
   <h:messages for="messageHeader" layout="list" errorClass="error"  infoClass="inform"/>
</h:panelGroup>

文本被渲染为

<ul>
  <li class="error"> Please enter a First Name </li>
  <li class="error"> Please enter a Last Name </li>
</ul>

如何让 CSS 样式应用于 <ul>标签或一些周边 <span>标签？

这就是我想要做的。我希望所有错误消息都显示在一个红色框中。我还希望所有信息消息都显示在一个绿色框中。上面的例子产生了2个红色的盒子；每人一份 <li>元素。

Answer 1

使用 styleClass <h:messages> 的属性.它将应用于父 HTML 元素。

例如。

<h:messages styleClass="messages" />

最终会变成

<ul class="messages">
    ...
</ul>

更新 : 您似乎想在 中显示信息和错误消息单独 列表。用两个 <h:messages/>相反，您隐藏了其他严重性。

<h:messages styleClass="errorMessages" infoStyle="hide" />
<h:messages styleClass="infoMessages" errorStyle="hide" />

和

.hide {
    display: none;
}