CSS优先于重要吗？答案

【问题标题】：CSS priority over important?CSS优先于重要吗？
【发布时间】：2020-05-17 23:58:10
【问题描述】：

我有一个网站的前端，另一个程序员在某处使用内联 !important 标记有很多 php 文件，所以我无法跟踪它来更改填充大小。我留下了前端自定义样式表，用 !important 替换那个样式表。但它已经很重要了。怎么改？

原始 HTML 和 CSS：

<ul class="the_champ_facebook_share" style="padding: 7.35px 0 !important;"> .... </ul>

我想要这个：

.the_champ_facebook_share {
    padding: 0px !important;
}

【问题讨论】：

供将来参考：一旦您发现自己在使用!important，这很明显表明您很可能做错了什么。
在 ul 中添加 id 并为其添加样式。它简单易行。

标签： jquery html css css-selectors

【解决方案1】：

您的css 无效，请使用这个：

.the_champ_facebook_share {
  padding: 0 !important;
}

这并不能解决问题，因为内联样式更重要。您肯定需要将其从 html 中删除。

正如@Phong 所提到的，您将能够使用javascript 动态更新样式。这绝对不是一个好习惯->真的矫枉过正。好的做法是在所有文件中搜索（使用基本 IDE 非常简单）单词 the_champ_facebook_share，然后删除此内联样式。

【讨论】：

谢谢，我改了。但是非零填充仍然具有优先权，并且我没有显示

【解决方案2】：

好像你写错了，CSS语法是这样写的：

因此，


.the_champ_facebook_share {
  padding: 0 !important;
}

【讨论】：

所以这是一个小错字，我们可以结束这个问题吗？
请勿发布代码、数据、错误消息等的图片 - 将文本复制或输入到问题中。 How to Ask

【解决方案3】：

你可以使用jQuery来实现。

但是，正如@Roko C. Buljan 的评论，使用!important 不是一个好方法。所以你只需要inline style 没有!important，如下所示。

输出

$(".the_champ_facebook_share").attr('style', 'padding: 0px');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="the_champ_facebook_share" style="padding: 7.35px 0 !important;"> <li>123</li> </ul>

【讨论】：

我认为这是正确的答案，但我也认为在这种情况下您不需要 !important ，因为此设置替换内联设置。跨度>
是的，我刚刚更新了我的答案。请看一下@Johannes
请勿发布代码、数据、错误消息等的图片 - 将文本复制或输入到问题中。 How to Ask
@Rob 您确实意识到代码是写在答案中的，并且您所指的图像是输出的屏幕截图，恰当的显示，其本质上是图形 /i>?如果不是通过实时开发工具，您希望 Phong 如何显示填充已正确设置？编写一个函数来输出style（它将传递文本）？那真的会更易读吗（然后他们需要在粘贴输出文本后解释函数）？
@Hashbrown 右键单击元素。选择“复制”

【解决方案4】：

在这个ul中添加id，然后把style放进去。它可以覆盖您的 !important 属性，因为 id 比 class 具有更高的优先级。

#new_facebook_champ{
padding: 7.35px 0 !important;
}
.the_champ_facebook_share{
padding: 0 !important;
}

&lt;ul class="the_champ_facebook_share" id="new_facebook_champ"&gt; .... &lt;/ul&gt;

【讨论】：

这是不正确的，因为 ul 使用与 style="" 的内联样式。向其添加 id 新样式不会具有高优先级。