我的媒体查询被普通的CSS代码覆盖

Question

P.S：我在前端使用React，在CSS上使用SASS，这就是为什么它是'className'而不是'class'并且CSS中没有括号的原因。

解释不多，基本上，每当我尝试例如在表格视图上显示汉堡菜单时，它就永远不会出现并保持显示状态：

.logo__area-mobile
    display: none


@media only screen and (max-width: 768px)
    .logo__area-mobile
        display: block

HTML：

<header>
  <div className="header-search">
    <div className="logo__area-mobile">
      <button>&#9776;</button>
    </div>
    <div className="header-search-input">
      <i className="fas fa-search"></i>
      <input type="text" placeholder="Est: Daredevil, Orange is the new black" />
    </div>
  </div>
  <div className="header-menu">
    <div className="menu">
        <ul>
            <li><NavLink to="/recently" activeClassName="is-active">مضاف مؤخراً</NavLink></li>
            <li><NavLink to="/series" activeClassName="is-active">المسلسلات</NavLink></li>
            <li><NavLink to="/movies" activeClassName="is-active">الافلام</NavLink></li>
            <li><NavLink to="/" activeClassName="is-active" exact>الرئيسية</NavLink></li>
        </ul>
    </div>
    <div className="logo">
        <Link to="/">EgyMovs</Link>
    </div>
  </div>
</header>

Answer 1

为您的元素使用更具体的选择器。 像2个类别或标签名称和类别名称。

计数提示：

.a .b //00020
#id .a //00110 -- more specific, higher priority