0
我要覆蓋Primefaces CSS類的填充屬性爲我TabView的，但有：Primefaces CSS覆蓋單組分
.ui-tabs .ui-tabs-panel
{
padding:0 !important;
}
我重寫使用這個類的所有組件。
我不是很熟悉CSS選擇器，所以我嘗試了一些例子，從
http://www.w3.org/TR/CSS2/selector.html
找到一個解決方案。
<style>
.test
{
padding:0 !important;
}
</style>
不工作
我也曾嘗試：
.ui-tabs .ui-tabs-panel .test
.test .ui-tabs .ui-tabs-panel
.ui-tabs .ui-tabs-panel#tabView
tabView .ui-tabs .ui-tabs-panel .test
，並有和沒有點所有不是爲我工作之間的空隙一些其他變化。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:form id="form_content" styleClass="myContent" style="background:blue" >
<p:tabView id="tabView" style="background:green;" StyleClass="test" >
<p:tab id="tab1" title="#{messages.Tab}" >
<ui:include src="ContentTab.xhtml" />
</p:tab>
</p:tabView>
</h:form>
</ui:composition>
有人可以向我解釋如何我可以建立這樣的聲明，以便我只改變這個組件元素？
編輯：添加一些信息到源代碼。我知道很多！重要的聲明，但沒有它，它就無法工作。即使我清除整個CSS文件，它仍然不單獨與聲明一起工作。
Server: Jetty 8 as Maven Plugin
Browser: Firefox: 17.0.9
Primefaces: 4.0.3
JavaServerFaces: MyFaces 2.0.2
起始頁
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body >
<h:outputStylesheet id="primefaces_overwriteCSS" library="css"
name="Primefaces_Overwrite.css" />
<h:outputStylesheet id="myCSS"
library="css" name="my.css" />
<p:layout fullPage="true">
<p:layoutUnit id="layoutTop" position="north" >
<div id="div_topNavigation" >
<ui:include src="/TopNavigation.xhtml"/>
</div>
</p:layoutUnit>
<p:layoutUnit id="layoutLeft" position="west" collapsible="true" collapsed="false" header=""
styleClass="layoutLeft">
<div id="div_leftHandNavigation" >
<ui:include src="/LeftHandNavigation.xhtml"/>
</div>
</p:layoutUnit>
<p:layoutUnit id="layoutCenter" position="center" styleClass="layoutCenter" style="background:black;">
<div id="div_content" style="background:red;">
<ui:include src="Content.xhtml" />
</div>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
CSS文件
Primefaces_Overwrite.css
.ui-accordion .ui-accordion-header {
background: #fff ;
border: none ;
}
.ui-accordion .ui-accordion-header a:hover {
background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0)) repeat scroll 0 0 #C3D79C;
border: none;
box-shadow: 0 0 8px #000;
color: black;
font-weight: bold;
}
.ui-accordion .ui-accordion-content {
border-top: 0 none;
margin-bottom: 2px;
margin-top: 5px;
overflow: visible !important;
padding: 0 !important;
position: relative;
top: 1px;
}
.ui-layout-unit {
padding: 6px !important;
visibility: hidden;
}
.ui-layout-unit-header, .ui-layout-unit-footer {
padding: 0.4em 0.2em 1em 0.4em !important;
}
.ui-state-active a {
color: #000 !important;
}
.ui-state-active a:link {
background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0)) repeat scroll 0 0 #C3D79C ;
}
.ui-state-active a:hover {
background: #fff;
}
.ui-menubar {
width: -moz-max-content !important;
}
.ui-panel .ui-panel-content {
background: none repeat scroll 0 0 transparent;
border: 0 none;
padding: 0 !important;
}
.ui-panelgrid {
border-collapse: separate !important;
}
.ui-panelgrid td {
border-width: 0 !important;
border-color: inherit;
border-style: solid;
padding: 0 !important;
}
.ui-menu {
padding: 0 !important;
}
.ui-menuitem-link.ui-corner-all.ui-state-hover {
background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0)) repeat scroll 0 0 #C3D79C;;
border: none;
box-shadow: 0 0 8px #000;
color: black;
font-weight: bold;
}
.ui-tabs .ui-tabs-nav li a:hover {
background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0)) repeat scroll 0 0 #C3D79C;
border: none;
box-shadow: 0 0 8px #000;
color: black;
font-weight: bold;
}
.ui-tabs {
margin-top: -7pt;
border: medium none;
padding: 0 !important;
padding-top: 0.2em !important;
}
my.css
.layoutLeft
{
min-width:180px !important;
}
.topNavigation {
font-size: 8pt;
}
.topNavigatonUser {
width: 160px;
float: right;
border: none;
}
.leftHandNavigation {
font-size: 11px !important;
heigth: 100%;
}
.leftHandNavigatonPanel {
width: 98%;
min-height: 600px;
border: none;
}
.myContent {
font-size: 12px;
height:100%;
}
#tabView .ui-tabs-panel
{
padding: 0;
}
不起作用。我發佈了一些額外的信息到源代碼。也許這個問題不僅僅是一個簡單的語法錯誤 – Shibas