css - 用`！important`覆盖父类CSS不起作用？

Question

我有一个导航栏，我想在页面上显示。合并此栏有意义的地方是在带有 className 的 div 之后content。我要覆盖的内容中的属性是margin.

我想重用这个navbar类。我认为如果我添加了margin: 0px 0px !important它会覆盖所需属性的行，但它不会。margin如果我从content课堂上注释掉，我只能让样式做我想做的事。

/* css */
.content {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
}
.navbar {
  padding: 20px;
  display: flex;
  align-items: center;
  max-width: 600px;
  margin: 0px 0px !important;
  border-bottom: 1px solid #f2f2f2;
}

/* App.js */
function App() {
   return (
     <Router>
        <div className="App">
              <div className="navbar">
                     <NavLink
                     >Hello
                     </NavLink>
                     <NavLink
                     >World
                     </NavLink>
                </div>
            <div className="Content">
                <div className="navbar">
                     <NavLink
                     >Foo
                     </NavLink>
                     <NavLink
                     >Bar
                     </NavLink>
                </div>
            </div>
        </div>
      </Router>
   );
}

标签： cssreactjs