使用自定义 css 将 styleClass 应用于 div答案

【问题标题】：Applying a styleClass to a div using a custom css使用自定义 css 将 styleClass 应用于 div
【发布时间】：2015-09-03 17:01:35
【问题描述】：

我有一个定义为资源的 css (approval.css) 并应用于我的 XPage。在 css 中我有这一行

.appNavBackground {background-color:#ffffd6 ;}

在我的源代码中，我有一个 div，我将这个 styleClass 应用如下：

<div class="row" styleClass="appNavBackground">

但 styleClass 未应用于该行。我将行更改为：

<div class="row" style="background-color:#ffffd6">

而且效果很好。如果我将 div 包装在 xp:panel 中并从 css 中选择样式，它的形式也很好，但是有额外的面板定义，除了选择 styleClass 之外什么都不做。

我在 div styleClass 定义中遗漏了什么？

【问题讨论】：

【解决方案1】：

您将 class 的 HTML div 语法与 styleClass 的 XPages 组件语法混合在一起。所以要么只使用 HTML 并执行此操作（假设您希望同时应用 row 和 appNavBackground CSS 类）：

<div class="row appNavBackground">

或者将其更改为 XPages 组件并执行以下操作：

<xp:div styleClass="row appNavBackground">

【讨论】：

所以只要一个人识别不同的语法，这两个语句在功能上就没有区别？有没有首选的情况？
如果你只需要一个div，你可以继续使用HTML div。但是，如果您希望 div 在某些条件下隐藏，您应该使用 xp:div，因为这样您就可以将逻辑应用于渲染和加载的属性。
谢谢 - 所以基本上可以混合 xp:div 和 div 只要你得到正确的匹配没有问题。
可以，可以混搭

【解决方案2】：

您需要更改您的代码。

<div class="row appNavBackground">Hello World!</div>

希望这会有所帮助。

【讨论】：