wicket父子页面中的css规则继承答案

【问题标题】：css rule inheritance in wicket parent-child pageswicket父子页面中的css规则继承
【发布时间】：2011-10-02 15:19:32
【问题描述】：

我在解决 wicket 父子页面中的 css 类时遇到问题。

我有一个检票口基本页面 (BasePage) 和一个扩展 BasePage 的子页面 (ChildPage)。

BasePage 中的 div 是这样的，

<div class="container-fluid">
    <wicket:child/>
</div>

在 ChildPage 中

<wicket:extend>
       <div class="sidebar">
          ..........
       </div> 
 </wicket:extend>

在我的基本页面 css 中，我包含了一个 css 文件，其中有一个 css 规则，例如

.container-fluid > .sidebar {
  float: left;
  width: 220px;
}

div container-fluid 在 BasePage 中，sidebar div 在 ChildPage 中。卜问题是在渲染子页面之后，它没有找到侧边栏类并且页面没有正确显示。但是如果将侧边栏类 css 放在 ChildPage 中，它就可以工作。但是，如果我必须专门放置所有子 css，那么将来子页面会有很多，而且 css 将是多余的，这将是一项混乱的工作。

有什么线索吗？

【问题讨论】：

当你说你把它放在一个或另一个中时，这是否意味着你正在使用<style></style>元素？
是的，如果我将 css 单独放在子样式中，它显然可以在找到 css 规则时工作，但我已经将 css 文件包含在父页面的检票头中。它不应该包含在渲染的子页面中吗？

标签： html css wicket

【解决方案1】：

BasePage/ChildPage 关系主要存在于 Java 中——当最终页面被渲染时，它应该被渲染为一个单一的实体。例如，如果您通过 IHeaderContributor 插入 CSS，则它在 ChildPage 或 BasePage 中不会有任何区别 - 它会在同一点输入。

您拥有的 CSS 非常严格。 > 字符表示直接子代（不是后代）。正如 Draevor 所指出的，Wicket 在开发模式中插入了很多额外的标记。将限制性 CSS 或 Javascript 与 Wicket 组件混合通常不是一个好主意。或者，更确切地说，要非常小心。

我想知道，当通过子页面插入 CSS 时，Wicket 插入的“额外”div 可能会被跳过？这没有任何意义，但这将是一个有趣的实验。

【讨论】：

【解决方案2】：

你看过源吗？也许检票口插入了一些额外的标记。为了安全起见，只需从您的 CSS 声明中删除 >，即使您在 div 之间有一些东西，它也应该可以工作。

【讨论】：