Question

我想为我的tabview覆盖Primefaces CSS Class的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 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;   
    }

Answer 1

要仅将样式应用于标识为tabView的tabview，您可以使用以下内容：

#tabView .ui-tabs-panel
{
    padding: 0;   
}

这将覆盖样式，因为id选择器的优先级高于类选择器，并且填充是通过类选择器设置的。

Answer 2

我有一个类似的问题，试图摆脱一个特定菜单上的primefaces selectCheckboxMenu的“全选”复选框。一个问题是，对于实际的弹出菜单，id实际上变为“/ yourID / _panel”。我尝试在CSS中使用该ID，但它不起作用（可能是因为它在一个表单中）。我结束了：

div[id*="mySpecificID"] .ui-selectcheckboxmenu-header .ui-chkbox {
    visibility: hidden;
}

这很有用，所以在ID上使用通配符选择器可能是一个选项。

发布以防万一其他人正在寻找像我一样的解决方案。

Answer 3

尝试将自己的样式表放在正文中而不是标题中。所以喜欢这个

<h:body>
    <h:outputStylesheet name="my.css" />
    <h:outputStylesheet name="Primefaces_Overwrite.css" />

Primefaces CSS覆盖单个组件

3 个答案: