如何在不使用 !important 的情况下覆盖 primefaces 组件内联样式？答案

【问题标题】：how to override primefaces component inline style without using !important in css?如何在不使用 !important 的情况下覆盖 primefaces 组件内联样式？
【发布时间】：2013-02-06 11:17:24
【问题描述】：

我在我的一个网页上使用 primefaces 组件 p:selectonemenu。我正在尝试使用我自己的 css 对其应用样式（不使用 !important），但它没有从我自己的外部 css 文件中获取样式。它从某个地方采用了一些内联样式，但我不希望该组件具有那种内联样式。我希望它使用我自己的外部 css 文件中的样式。

我不知道这种内联样式的来源。这是来自任何javascript吗？我需要帮助，下面是我的代码。

Primefaces 代码

<p:selectOneMenu value="#{Controller.property}" id="dropDown">
  <f:selectItem itemLabel="Select One" itemValue="0" />
  <f:selectItems value="#{controller.property}"/>
</p:selectOneMenu>

HTML 解释代码

<div id="j_idt40" class="ui-selectonemenu ui-widget ui-state-default 
ui-corner-all ui-helper-clearfix" style="width: 190px;">

【问题讨论】：

标签： javascript html css jsf primefaces

【解决方案1】：

这是来自任何 javascript 吗？

没错。此内联样式由PrimeFaces.widget.SelectOneMenu.initWidths 在primefaces.js 中设置。

在没有!important 的情况下覆盖它的唯一方法是自己指定内联样式。

<p:selectOneMenu ... style="width: 500px">

您也可以使用自定义 JS 文件覆盖 PrimeFaces.widget.SelectOneMenu.initWidths，但这会影响所有 <p:selectOneMenu> 组件。

【讨论】：

【解决方案2】：

内联样式具有最大的“特异性”，它们会覆盖所有适用的规则，因此您唯一的补救措施是 !important（除非您可以通过某种方式覆盖 style 属性值）。

编辑：抱歉忽略了核心问题。所以，你的食谱如下：

插入

 <script>
   debugger;
 </script>

在<body> 的末尾，打开 DevTools，然后加载页面。

现在，一旦您在 DevTools 调试器中，切换到元素面板，并找到接收内联样式的元素。它应该还没有。

右击该元素并在上下文菜单中选择Break on... | Attribute modifications。现在，当style 属性值更改时，您应该在相应的 JavaScript 行上中断。祝你好运！

【讨论】：

：这不能回答我的问题..我想知道该内联样式来自哪里，有什么我们可以忽略特定组件的内联 CSS