时间戳

首页 > 解决方案 > 具有 2 个重要的 CSS 优先级

html - 具有 2 个重要的 CSS 优先级

问题描述

我导入了两个 CSS 文件。我可以更改第一个导入的 CSS 文件，但不能修改第二个。我也无法编辑 HTML，只能编辑 CSS。

我有一个元素：

<tr id="mad3161b5-co_0" role="presentation" control="true" class="  multiparttext leafspacer verticalSpacer" style="vertical-align:top;">
    <td id="mad3161b5-co2_0" role="presentation" nowrap="nowrap" class="  multiparttext leafspacer verticalSpacer" style="">
        <label id="mad3161b5-lb" ctype="label" noclick="1" targetid="mad3161b5-lb" class="text label  " style="display:block;margin-top: 5px;" for="mad3161b5-tb">some text</label>
    </td>
</tr>

在第二个不可编辑的 CSS 文件中，有：

.leafspacer td > label { padding-top: 7px !important; }

我需要添加一个规则来将 padding-top 覆盖为 5。我试过这个：

.leafspacer tr > td > label { padding-top: 5px !important; }

或者

tr > td > label { padding-top: 5px !important; }

根据我对优先级规则的理解，padding-top: 5px !important;应该有更高的优先级并覆盖填充 7，但它不起作用。

如何根据无法编辑 HTML 并且只能编辑第一个导入的 CSS 文件的限制，用 5 覆盖填充 7？

标签： htmlcss

解决方案

!importants不好。时期。

如果遇到这样的问题，则表明您的项目需要重构，而不必使用!importants。

要回答这个问题，您尝试覆盖的选择器具有(0,1,2)!（0 个 ID，1 个类，2 个其他，重要）的特异性。

要覆盖该选择器，您至少需要(0,1,3)!or (0,2,0)!。

通过查看您所做的尝试，您可能会看到

.leafspacer tr > td > label { padding-top: 5px !important; }

有一个特殊性(0,1,3)!，所以它应该可以工作。但是，它也改变了选择器的行为（需要在中tr，但事实并非如此），所以它不匹配。.leafspacer

您所做的另一次尝试的特异性更低(0,0,3)!，因此它不起作用。

要解决此问题，您可以更改您的第一次尝试以匹配该元素：

tr.leafspacer > td > label { padding-top: 5px !important; }

但是，这仍然与不可更改的 CSS（需要tr）的行为不同，如果 HTML 结构发生更改，可能会破坏您的代码。

因此，您最好的解决方法是重复该类，在(0,2,2)!不改变行为的情况下赋予选择器特定性：

.leafspacer.leafspacer td > label { padding-top: 5px !important; }

这在所有情况下都有效，但我不能强调你应该重构代码以避免使用!importants 如果你有任何办法这样做！

推荐阅读