如何在不使用css中的！important的情况下覆盖primefaces组件内联样式？

Question

我在我的一个网页上使用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;">

Answer 1

这是来自任何JavaScript？

那是对的。 此内联样式由primefaces.js的PrimeFaces.widget.SelectOneMenu.initWidths设置。

没有!important的唯一方法就是自己指定内联样式。

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

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

Answer 2

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

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

插入

  <script> debugger; </script>

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

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

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

如何在不使用css中的！important的情况下覆盖primefaces组件内联样式？

问题描述

Primefaces代码

HTML解释代码

2 个解决方案

解决方案1
2 2013-02-28 12:10:50

解决方案2
0 2013-02-21 08:13:06

如何在不使用css中的！important的情况下覆盖primefaces组件内联样式？

问题描述

Primefaces代码

HTML解释代码

2 个解决方案

解决方案1 2 2013-02-28 12:10:50

解决方案2 0 2013-02-21 08:13:06

解决方案1
2 2013-02-28 12:10:50

解决方案2
0 2013-02-21 08:13:06