个人中心
gpt4 book ai didi

html - Primefaces CSS覆盖单个组件

转载 作者：太空宇宙 更新时间：2023-11-04 04:11:39 26 4
gpt4 key购买 nike

我想为我的 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>

有人可以向我解释如何构建这样的语句以便我只更改此组件元素吗？

编辑:向源代码添加一些信息。我知道很多!important statments 但没有它就无法工作。即使我清除了整个 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;   
    }

最佳答案

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

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

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

关于html - Primefaces CSS覆盖单个组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20562439/

26 4 0
文章推荐： linux - No Machine的Nxserver可以在没有桌面、只有X11的ubuntu上运行吗？
文章推荐： c - 在主机上为具有库的目标开发 Paho-Mqtt-C 应用程序
文章推荐： linux - 如何使用一些 Linux 命令设置 crontab 作业？
文章推荐： c - OS X 上的 undefined symbol "_clone"
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com