JSF CSS优先级排序[重复]

Question

我正在使用 Spring、JSP、PrimeFaces 6.2 和 bootstrap 3.37 开发一个 Eclipse 项目。

我有两个盒子，其中一个正确应用了 CSS，另一个没有。

我在 override.css 中有一些特定的 css 样式。它针对我正在使用的自定义类标签，然后更改背景颜色。

.mytag
{
    background-color: rgb(255,204,204);
}

我的页面结构是这样的

• head - 加载子文件夹标题页
• body - 加载表单页面
• 页脚

<h:head>
    <title>#{text['form.title']}</title>
    <h:outputStylesheet library="css" name="form.css"/>
    <h:outputScript library="js" name="form.js"/>
    <h:outputStylesheet library="css" name="override.css" />    
</h:head>

文件中唯一应用的 CSS 是“mytag”，但如下所示，更多的 CSS 正在自动插入。

标题 css 标签

ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all mytag

不是标题 css 标签

ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all mytag

当我使用适用于 IE 的 F12 开发人员工具（它是一个特定于 IE 的站点/应用程序）并查看样式时，我看到的样式从最高到最低是不起作用的

• form.css span.if .ui-inputfield, div.if .ui-inputfield
• components.css .ui-widget-header .ui-inputfield, .ui-widget-content .ui-inputfield
• theme.css .ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield
• （背景）主题.css .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
• theme.css .ui-widget .ui-widget
• form.css .ui-widget, .ui-widget .ui-widget
• （背景）主题.css .ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield
• theme.css .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
• theme.css .ui-widget .ui-widget
• theme.css .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button
• theme.css .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button
• components.css .ui-inputfield
• override.css .mytag

这里是可行的样式列表

• forms.css span.if .ui-inputfield, div.if .ui-inputfield
• 组件.css .ui-inputfield
• override.css .mytag

所以两个框都有相同的代码部分应用 CSS，所以顺序应该是相同的。然而，我发现“form.css”和“components.css”始终比我的覆盖具有更高的优先级，无论我如何在标题中对它们进行排序。由于“theme.css”正在自动应用，因此无法正常工作的盒子更糟糕。

注意：我原本以为是 bootstrap.theme.css，但另一个 question/answer 让我相信它实际上是 primefaces 主题。 <h:outputStylesheet library="primefaces-aristo" name="theme.css" />

我尝试过的解决方案

• 重新排序头部中的 css 元素
• 从answer 页面加载后添加了 override.css（override.css 根本不存在，所以我一定做错了）
• 在覆盖之前包括 primefaces 主题
• <f:facet name="first|middle|last">来自这个answer

Answer 1

如果有人感兴趣，因为我的问题是由于 BalusC 和 Kuleltje 在 cmets 中提到的特殊性。他们指出的question 确实解决了这个问题。

由于自动添加来自 JSF 或 primefaces 的类标签，我不得不修改 override.css 文件以更好地匹配。

.ui-inputfield.ui-inputtext.ui-widget.ui-state-default.ui-corner-all.mytag
{
    background-color: rgb(255,204,204);
}