0

我正在尝试使用以下代码覆盖 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") 重复-x 滚动 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";
}
4

1 回答 1

3

这是错误的。

<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>

in order to get it to load after PrimeFaces' one.

Unrelated to the concrete problem, you're not using the library attribute the right way. Please carefully read What is the JSF resource library for and how should it be used? and cleanup your wrong resource library approach.

于 2012-12-17T16:17:53.013 回答