【发布时间】：2013-12-13 08:51:21
【问题描述】：
我想为我的 tabview 覆盖 Primefaces CSS 类的 padding 属性，但是：
.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;
}
我的.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;
}
【问题讨论】：
标签： html css jsf primefaces