Question

我有<p:panel>，标识为X，我想从其内容中删除填充X_content生成的面板内容HTML为：

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

padding:0.5em 1em;

我创建了一个嵌入式样式表来覆盖primeface中的一个样式表，如下所示：

<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 {
    ...
}

enter image description here

这基本上意味着“选择具有ui-panel-content类的所有元素，该类是具有ui-panel类”的元素的子元素，其根据CSS cascade rules更强的选择器。因此，它比CSS选择器具有更高的优先级。这与您的样式类的声明顺序无关（声明顺序仅在选择器具有相同强度时才重要）。

当覆盖PrimeFaces的默认CSS时，你应该提供的选择器至少相同的强度或更强的一个。在您的特定情况下，如果您打算全局应用样式，只需使用完全相同的选择器：

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

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