6

我有一个<p:panel>idX并且我想从其内容中删除填充，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>

但我没有工作，填充仍然存在，有人可以帮助我吗？

4

1 回答 1

12

你的 CSS 选择器

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

基本上意味着： “选择所有具有或类的元素ui-panel-contentui-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>in时<h:head>，它仍会被 PrimeFaces 默认 CSS 覆盖，因为它会自动包含在头尾。而是将其<style>移至，或者更好的是，将其放入您包含在inside<h:body>中的自己的 CSS 文件中。<h:houtputStylesheet><h:body>

也可以看看：

于 2013-05-10T16:07:53.573 回答