我的 scss 没有覆盖框架 css UIkit

Question

我在使用 scss 覆盖框架 css 规则时遇到问题。如果我添加 !important，一切正常......我应该怎么做才能在不使用该规则的情况下正常工作？
.html代码：

<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
</nav>

.scss代码：

.uk-navbar-container {
background: #383c4a;
}

同样，如果我添加 !important，我的导航栏会改变颜色...

Answer 1

你的问题是 .uk-navbar-container:not(.uk-navbar-transparent) 比你的 .uk-navbar-container 规则更具体。另一点是通常你不想为了一个修复而覆盖框架的规则，因为它会影响你的整个代码库。

解决问题的一种方法是添加更具体的规则，例如

.uk-navbar-container.--grey {
    background: #383c4a;
}

... 然后在 html

<nav class="uk-navbar-container --grey" uk-navbar>

只有在 after .uk-navbar-container:not(.uk-navbar-transparent) 之后定义了规则，这才有用，因为它们具有相同的特异性，最后一个将被应用。我附上了一个片段来演示它是如何工作的。

阅读有关 specificity to get better understanding of the problem, and also you might want to check out this article 的更多信息以及 not 的示例。

body {
  font-size: 22px;
}
.test:not(.another) {
  color: blue;
}
.test {
  color: red;
}
.test.green {
  color: green;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="test">I'm blue</div>
    <div class="test green">I'm green</div>
  </body>
</html>

我的 scss 没有覆盖框架 css UIkit

my scss is not overriding framework css UIkit

html

css

sass

getuikit