Primefaces CSS覆盖单个组件 [英] Primefaces CSS overwrite single component

问题描述

我想覆盖我的标签页的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 
  
 pre> 
 
 
 < 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_contentstyleClass =myContentstyle =background：blue> 
 
< p：tabView id =tabViewstyle =background：green; StyleClass =test> 
 
< p：tab id =tab1title =＃{messages.Tab}> 
< ui：include src =ContentTab.xhtml/> 
< / p：tab> 
 
< / p：tabView> 
< / h：form> 
< / ui：composition> 
  
有人可以解释我如何构建这样的语句， ？
 
 
 
  EDIT ：向源代码中添加一些信息。我知道很多！重要的雕像，但它不工作没有它。即使我清除整个css文件，它仍然不能处理语句。 
 服务器：Jetty 8 as Maven Plugin 
浏览器：Firefox：17.0.9 
 Primefaces：4.0.3 
 JavaServerFaces：MyFaces 2.0.2 
  
 StartPage 
 <！DOCTYPE html PUBLIC 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_overwriteCSSlibrary =css
 name =Primefaces_Overwrite.css/> 
< h：outputStylesheet id =myCSS
 library =cssname =my.css/> 
< p：layout fullPage =true> 
 
< p：layoutUnit id =layoutTopposition =north> 
< div id =div_topNavigation> 
< ui：include src =/ TopNavigation.xhtml/> 
< / div> 
< / p：layoutUnit> 
 
< p：layoutUnit id =layoutLeftposition =westcollapsible =truecollapsed =falseheader =
 styleClass =layoutLeft> 
 
< div id =div_leftHandNavigation> 
< ui：include src =/ LeftHandNavigation.xhtml/> 
< / div> 
< / p：layoutUnit> 
 
< p：layoutUnit id =layoutCenterposition =centerstyleClass =layoutCenterstyle =background：black;> 
< div id =div_contentstyle =background：red;> 
< ui：include src =Content.xhtml/> 
< / div> 
 
< / p：layoutUnit> 
 
< / p：layout> 
 
< / h：body> 
 
< / html> 
 
 CSS FILES 
 
 
 
 Primefaces_Overwrite.css 
  .ui-手风琴.ui-手风琴标题{
 background：#fff; 
 border：none; 
} 
 
 
 .ui-手风琴.ui-accordion-header a：hover {
 background：-moz-linear-gradient（center top，rgba ，255，255，0.6），
 rgba（255，255，255，0））重复滚动0 0＃C3D79C; 
 border：none; 
 box-shadow：0 0 8px＃000; 
 color：black; 
 font-weight：bold; 
} 
 
 .ui-手风琴.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））重复滚动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菜单{
 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））重复滚动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; 
} 
  
 
 
解决方案
删除一个特定菜单上的一个primfaces selectCheckboxMenu的全选复选框。一个问题是，对于实际的弹出菜单，id实际上改变为/ yourID / _panel。我试着在CSS中使用该ID，但它没有工作（可能是因为它是一种形式）。我用了以下命令：
  div [id * =mySpecificID] .ui-selectcheckboxmenu-header .ui-chkbox {
 visibility：hidden; 
} 
  
这样工作，因此在ID上使用通配符选择器可能是此选项。
 
 
 
只是为了防止其他人寻找像我这样的解决方案。
 
i want to overwrite the padding attribute of the Primefaces CSS Class for my tabview but with:
.ui-tabs .ui-tabs-panel
{
padding:0 !important;   
}
i overwrite all Component that uses this class.

i am not very familiar with css selectors so i tried some examples  from 

http://www.w3.org/TR/CSS2/selector.html

to find a solution.
<style>
.test 
{
padding:0 !important;
}
</style>
Not working

I have also tried:
.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
and some other variations with and without spaces between the dots all not working for me.
<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>
Can someone explain to me how i can build such a statement so that i only change this component element only?

EDIT: add some information to the source code. I know to much!important statments but it do not work without it. And even if i clear the whole css file it still dont work with the statement alone.
Server: Jetty 8 as Maven Plugin
Browser: Firefox: 17.0.9
Primefaces: 4.0.3
JavaServerFaces: MyFaces 2.0.2
StartPage
   <!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 FILES

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

解决方案
I had a similar problem trying to get rid of the "select all" checkbox for a primefaces selectCheckboxMenu on one specific menu.  One problem is that for the actual popup menu, the id actually changes to "/yourID/_panel".  I tried using that ID in the CSS, but it didn't work (possibly because it was in a form).  I wound up using:
div[id*="mySpecificID"] .ui-selectcheckboxmenu-header .ui-chkbox {
    visibility: hidden;
}
This worked, so using the wildcard selector on ID might be an option for this.

Posted just in case someone else is looking for a solution like I was.

                        
这篇关于Primefaces CSS覆盖单个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！