CSS规则冲突：由于与另一个CSS规则冲突，CSS已被禁用。

Question

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

<ul class="core nested-level">

问题在于“core”在许多地方都有不同的规则定义;例如，hover、ul、*等。其中某个规则导致chrome开发者工具令人恼火地一直显示“nested-level”被禁用。

您有什么快速解决此问题的想法，或强制覆盖已经定义的样式（如果存在）？我尝试了下面的样式，但它没有正确显示：

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

- John Steve

Answer 1

看起来你在“core” CSS类中为特定的HTML元素定义了一个规则。例如：

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

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

修复方法是要么避免基于HTML元素定义CSS规则，要么在定义CSS规则时使用“important”关键字，如下所示：

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

这将修复您的问题。

- orabis

Answer 2

不使用！important更好。

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

在元素标记中添加ID。 id选择器比class选择器具有更高的优先级。

<ul id="myId" class="core nested-level">

并使用 CSS，例如：

#myId {
    padding-left: 62px;
}

- Ehsan

---

是的，这是一个很重要的观点。楼主现在正在寻找解决方法。希望他们在以后修复css时可以避免使用!important。 - orabis