CSS规则冲突：CSS因与另一个冲突而被禁用

Question

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

<ul class="core nested-level">

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

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

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

Answer 1

似乎您在＆＃34;核心＆＃34;中定义了一条规则。特定HMTL元素的css类。例如：

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

然后在您的＆＃34;嵌套级＆＃34;中，假设您尝试为同一属性定义规则。

修复它的方法是避免根据HTML元素定义css规则，或者使用＆＃34; important＆＃34;定义css规则时的关键字，如此

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

这将解决您的问题。

Answer 2

更好的是不要使用ID。

  

阅读更多：https://j11y.io/css/dont-use-important/

在Element标记中添加id。 class选择器的优先级高于<ul id="myId" class="core nested-level"> 选择器

#myId {
    padding-left: 62px;
}

并使用css赞：

{{1}}