CSS 规则冲突 : CSS disabled as a result of conflicts with another one

Question

我有一个网页，我需要更改它的 CSS。目前，我需要快速解决一个烦人的问题。有一些 HTML 元素使用多个 CSS 类，如下所示。

<ul class="core nested-level">

问题是“核心”在许多地方以不同的规则定义；悬停、ul、* 等。由于某些原因，这些规则之一导致“嵌套级别”被禁用，因为 chrome 开发人员工具烦人地不断出现。

知道如何快速解决此问题或强制此样式覆盖已定义的样式(如果存在)吗？我尝试了下面的样式，但它没有正确显示:

.nested-level {
    padding-left: 62px;
}

Answer 1

您似乎在“核心”CSS 类中为特定的 HMTL 元素定义了规则。例如:

ul.core{
     padding-left: 0px;
}

然后在您的“嵌套级别”中，假设您尝试为同一属性定义规则。

修复它的方法是避免基于 HTML 元素定义 css 规则，或者在定义 css 规则时使用“important”关键字，如下所示

.nested-level {
    padding-left: 62px !important;
}

这将解决您的问题。