在 css 覆盖上失败甚至完整路径 css (Primefaces)答案

【问题标题】：on css overriding fail even full path css (Primefaces)在 css 覆盖上失败甚至完整路径 css (Primefaces)
【发布时间】：2012-12-17 15:33:15
【问题描述】：

我正在尝试使用以下代码覆盖 PF 滑块的背景

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:p="http://primefaces.org/ui"
   xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
   <link rel="shortcut icon" type="image/x-icon"
      href="#{request.contextPath}/images/favicon.ico" />
   <title></title>

</h:head>
<body>
    <f:facet name="last">
      <h:outputStylesheet library="css" name="css.css" />
   </f:facet>

css.css的相关部分

.usagePanels.myslider.ui-widget-content,
html body div form#formData div#sliderDIV.ui-panel div#sliderDIV_content.ui-panel-content table tbody tr td table tbody tr td div#wwwpanel.ui-panel div#wwwpanel_content.ui-panel-content table#j_idt29.ui-panelgrid tbody tr.ui-widget-content td div#j_idt31.myslider
{
background-color: black!important;
}

它生成以下html，但滑块背景不是黑色。

 <html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/DataUsageCalculator/faces/javax.faces.resource/theme.css?ln=primefaces-blitzer" />
<link type="text/css" rel="stylesheet" href="/DataUsageCalculator/faces/javax.faces.resource/css.css?ln=css" />
<link type="text/css" rel="stylesheet" href="/DataUsageCalculator/faces/javax.faces.resource/primefaces.css?ln=primefaces" />
<script type="text/javascript" src="/DataUsageCalculator/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces"></script>
<script type="text/javascript" src="/DataUsageCalculator/faces/javax.faces.resource/primefaces.js?ln=primefaces"></script>

当我检查滑块上应用的样式并禁用线条时

.ui-widget-content { *background: url("/DataUsageCalculator/faces/javax.faces.resource/images/ui-bg_flat_75_ffffff_40x100.png?ln=primefaces-blitzer") repeat-x scroll 50% 50% #FFFFFF;*

}

使用萤火虫它可以工作。即使我使用完整路径 css，它也无法正常工作。我做错了什么？

应用样式（Firebug 输出）

element.style {
    width: 300px;
}
.usagePanels.myslider.ui-widget-content, html body div form#formData div#sliderDIV.ui-panel div#sliderDIV_content.ui-panel-content table tbody tr td table tbody tr td div#wwwpanel.ui-panel div#wwwpanel_content.ui-panel-content table#j_idt29.ui-panelgrid tbody tr.ui-widget-content td div#j_idt31.myslider {
    background-color: black !important;
}
.usagePanels .ui-widget-content {
    background-color: #F5FAFF !important;
}
.sliderDIV .ui-widget-content {
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-slider-horizontal {
    height: 0.8em;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-corner-all {
    border-radius: 6px 6px 6px 6px;
}
.ui-widget-content {
    background: url("/DataUsageCalculator/faces/javax.faces.resource/images/ui-bg_flat_75_ffffff_40x100.png?ln=primefaces-blitzer") repeat-x scroll 50% 50% #FFFFFF;
    border: 1px solid #EEEEEE;
    color: #333333;
}
.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.1em;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-panelgrid {
    border-collapse: collapse;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.1em;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.1em;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget, .ui-widget .ui-widget {
    font-family: Arial;
    font-size: 12px !important;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.1em;
}
element.style {
    text-align: center;
}
body {
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans","Verdana,Arial,sans serif";
}

【问题讨论】：

标签： css jsf primefaces

【解决方案1】：

这是错误的。

<h:head>
    ...
<h:head>
<body>
    <f:facet name="last">
        <h:outputStylesheet library="css" name="css.css" />
    </f:facet>
    ...
</body>

<body> 不是 JSF 组件，PrimeFaces 特定的<f:facet name="last"> 应该放在<h:head> 中。

你应该使用任何一个

<h:head>
    ...
    <f:facet name="last">
        <h:outputStylesheet library="css" name="css.css" />
    </f:facet>
<h:head>
<h:body>
    ...
</h:body>

或

<h:head>
    ...
<h:head>
<h:body>
    <h:outputStylesheet library="css" name="css.css" />
    ...
</h:body>

为了让它在 PrimeFaces 之后加载。

与具体问题无关，您没有以正确的方式使用 library 属性。请仔细阅读What is the JSF resource library for and how should it be used? 并清理您错误的资源库方法。

【讨论】：

我也试过了。没变。我也读了那个页面mkyong.com/jsf2/primefaces/how-to-override-primefaces-css。他说相反。可能是我误会了。无论如何，两种情况都没有奏效。因为我的css是在theme.css之后，primefaces.css之前加载的。 theme.css 中的样式（来自 primefaces 主题），ui-widget-content 不能被覆盖。
对不起，对我来说很好用：screencast.com/t/7lbvZl8Gfo 您的问题是由迄今为止提供的信息之外的其他地方引起的。也许您的 CSS 选择器是错误的。 .usagePanels 看起来很可疑。
我在那篇 mkyong 文章中发表了评论。
你应该像往常一样受到最大的感谢。我会从头开始检查一切。我想阅读您对 mkyong 文章的评论，但我找不到。