css - 使用Orbeon Forms样式化Web应用程序

假设我想在“猜数字”示例应用程序中将所有<h1>元素的颜色更改为红色。如何使用Orbeon Forms 4.0+ CE做到这一点？

使用Orbeon Forms 3.9.0 CE，可以按以下步骤进行：

<xhtml:head>
  <xhtml:title>Guess The Number</xhtml:title>
  <xhtml:style type="text/css">
    h1 {
      color: red;
    }
  </xhtml:style>
  ...

但是，当我尝试使用Orbeon Forms 4.5 CE进行测试时，它不再起作用：

<xh:head>
  <xh:title>Guess the Number</xh:title>
  <xh:style type="text/css">
    h1 {
      color: red;
    }
  </xh:style>
  ...

为了使其工作，我必须在CSS规则前添加.orbeon，如下所示：

<xh:head>
  <xh:title>Guess the Number</xh:title>
  <xh:style type="text/css">
    .orbeon h1 {
      color: red;
    }
  </xh:style>
  ...

这是目前应用CSS样式的正确方法吗？有没有办法使用“旧方法”来做到这一点？ :)之所以这样问，是因为我要将旧的Orbeon Forms引擎（3.x）更新到最新版本，因为它包含了许多有用的改进（谢谢大家！）。如果需要添加CSS规则，则必须将CSS样式添加到所有现有的XForms Web应用程序之前（并可能重写）。

最佳答案

从4.0版开始，Orbeon Forms uses Bootstrap。一些用户将Orbeon Forms生成的表单嵌入到现有页面中，而不希望Bootstrap CSS应用于其余页面。为了避免这种情况，Orbeon Forms随附的Bootstrap已被“修补”以在所有CSS规则之前添加.orbeon。因此，Orbeon Forms可以在需要时更轻松地覆盖Bootstrap规则，在所有Orbeon Forms CSS规则之前也添加了.orbeon。

结果，如果要覆盖Bootstrap或Orbeon Forms CSS规则，则需要使选择器“更强”，添加.orbeon是实现它的一种方法。请注意，如果您使用的是LESS之类的预处理器，那么对所有规则进行此操作就非常容易。例如参见xforms.less。