如何从p:panel内容中删除填充

Question

我有一个<p:panel>带有id X,我想从其内容中删除填充X_content为面板内容生成的HTML是:

<div id="X_content" class="ui-panel-content ui-widget-content"> 并且元素出现在chrome开发人员工具中以获得填充:

padding:0.5em 1em;

我制作了一个嵌入式样式表来覆盖primefaces中的那个,如下所示:

<h:head>
  <style>
       .ui-panel-content, .ui-widget-content{
           padding:0px;
       }
  </style>
</h:head>

但我没有工作,填充仍然存在,任何人都可以帮助我吗？

Answer 1

你的CSS选择器

.ui-panel-content, .ui-widget-content {
    ...
}

基本上是指:"选择所有元素ui-panel-content或ui-widget-content类".

但是,填充是由此CSS选择器在PrimeFaces默认CSS中定义的

.ui-panel .ui-panel-content {
    ...
}

这基本上意味着"选择具有ui-panel-content类的所有元素,该类是具有类的元素的子元素ui-panel",这是根据CSS级联规则更强的选择器.因此,它比CSS选择器具有更高的优先级.这与样式类的声明顺序无关(声明顺序仅在选择器具有相同强度时才重要).

当重写PrimeFaces默认CSS时,您应该提供至少相同强度或更强的选择器.在您的特定情况下,如果您打算全局应用样式,请使用完全相同的选择器:

.ui-panel .ui-panel-content {
    padding: 0;
}

请注意,使用<style>时<h:head>,它仍然会被PrimeFaces默认CSS覆盖,因为它自动包含在头部.而是将其移动<style>到<h:body>,或者更好地将其放入其<h:houtputStylesheet>内部包含的CSS文件中<h:body>.

也可以看看:

• 如何使用自定义样式覆盖默认的PrimeFaces CSS？
• CSS选择器语法