Question

我想覆盖.ui-menubar的外观-但是，我放置在default.css中的任何内容都没有用，因为它被Primefaces组件覆盖了。

我尝试通过以下方面来更改顺序：

<h:head>
  <f:facet name="first">
    <title>Report Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </f:facet>
  <f:facet name="last">
    <h:outputStylesheet name="css/default.css"/>
  </f:facet>
</h:head>

请注意，此部分是模板的一部分。

呈现如下：

<head id="j_idt2">
  <title>Report Title</title>
  <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="/my-web/javax.faces.resource/theme.css.xhtml?ln=primefaces-redmond">
  <link type="text/css" rel="stylesheet" href="/my-web/javax.faces.resource/css/default.css.xhtml">
  <link type="text/css" rel="stylesheet" href="/my-web/javax.faces.resource/components.css.xhtml?ln=primefaces&amp;v=6.2">
  [javascript resources omitted for brevity ...]
</head>

我使用的是撰写6.2时的最新Primefaces。

渲染的输出清楚地显示了自定义components.css之后的default.css。

如何正确订购？

请注意，如果我避免使用<h:outputStylesheet>，则可以正确覆盖样式，如下所示：

  <f:facet name="last">
    <style>
      .ui-menubar  {
        padding: 0px;
        margin: 0px;
      }
    </style>
  </f:facet>

这是我的解决方法，但是我认为通过在页面中而不是CSS对其进行硬编码，这不是一个正确的设计。

请注意，还有其他几篇类似的文章，但我需要强调，我 DO 使用并想使用<h:outputStylesheet>输出的正确顺序，而不是使用内联的其他解决方法样式等。尽管我仍在继续研究，但我仍找不到工作答案的重复帖子。

还要注意，PrimeFaces documents在<f:facets>标签中使用<h:head>非常清楚：

PrimeFaces有自己的HeadRenderer，它执行以下顺序：


“第一个”构面（如果已定义）

主题CSS

“中间”构面（如果已定义）

PF-JSF注册的CSS和JS

头内容

“最后一个”构面（如果已定义）

这表示在其他所有元素之后的最后一个方面。

Answer 1

我有同样的问题。我将<facet name="last"放在体内，它起作用了。

h：head中的Primefaces f：facet name =“ first”和“ last”未用于订单

1 个答案: