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

bxjv4tth 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(165)

我有一个id为X的<p:panel>，我想从它的内容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>

型
但是我没有工作，填充物仍然存在，有人能帮助我吗？

css

来源：https://stackoverflow.com/questions/16486097/how-to-remove-padding-from-ppanel-content

1条答案

按热度按时间

nue99wik1#

您的CSS选择器

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

字符串
基本上意味着：“选择所有具有ui-panel-content或ui-widget-content类的元素”。
但是，在PrimeFaces默认CSS中，填充是由这个CSS选择器定义的

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

型

的数据
这基本上意味着 “选择所有具有ui-panel-content类的元素，这些元素是具有ui-panel类的元素的子元素” 这是根据CSS cascade rules一个更强的选择器。因此，这比CSS选择器具有更高的优先级。这与样式类的声明顺序无关（声明顺序只在选择器具有相等强度时才重要）。
当覆盖PrimeFaces默认CSS时，你应该提供一个 * 至少 * 相同强度或更强的选择器。在你的特定情况下，如果你打算全局应用样式，只需使用相同的选择器：

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

型
请注意，当在<h:head>中使用<style>时，它仍然会被PrimeFaces默认的CSS覆盖，因为它会自动包含在end of head中。而是将<style>移动到<h:body>，或者更好的是，将它放在自己的CSS文件中，然后在<h:body>中包含<h:houtputStylesheet>。

参见：

如何使用自定义样式覆盖默认的PrimeFaces CSS？
CSS selector syntax的

赞(0）回复(0）举报 2024-01-09

我来回答

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

1条答案

参见：

相关问题

热门标签

最新问答