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