Question

我试图用以下代码覆盖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";
}

Answer 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?并清理错误的资源库方法。

on css overriding fail甚至完整路径css（Primefaces）

1 个答案: