display:none;不工作但 visibility:hidden；做

Question

我试图在屏幕达到一定宽度时隐藏我的菜单，但由于某些原因 display:none 不起作用，但 visibility:hidden 可以。
我使用的是教程中那个人的确切代码（取自他上传的 css 文件），它对他有效但对我无效？
我明白两者之间的区别，但我不明白理解为什么一个人隐藏元素而另一个人出于某种原因不隐藏元素。
这是 css 代码：

  .site-header__menu-trigger {
    color: #FFF;
    cursor: pointer;
    font-size: 1.2rem;
    position: absolute;
    z-index: 10;
    top: 7px;
    right: 46px;
  }

  @media (min-width: 530px) {

    .site-header__menu-trigger {
      top: 5px;
      font-size: 1.4rem;
    }
  }

  @media (min-width: 960px) {

    .site-header__menu-trigger {
      display: none;
    }
  }

更新：抱歉，这是我的 HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body>
<header class="site-header">
    <div class="container">
      <h1 class="school-logo-text float-left"><a href="<?php echo site_url() ?>"><strong>Fictional</strong> University</a></h1>
      <span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
      <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i> 
      <div class="site-header__menu group">
        <nav class="main-navigation">
          <ul>
            <li><a href="<?php echo site_url('/about-us') ?>">About Us</a></li>
            <li><a href="<?php echo site_url('/programs') ?>">Programs</a></li>
            <li><a href="<?php echo site_url('/events') ?>">Events</a></li>
            <li><a href="<?php echo site_url('/campuses') ?>">Campuses</a></li>
            <li><a href="<?php echo site_url('/blog') ?>">Blog</a></li>
          </ul>
        </nav>
        <div class="site-header__util">
          <a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
          <a href="#" class="btn btn--small  btn--dark-orange float-left">Sign Up</a>
          <span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
        </div>
      </div>
    </div>
  </header>
</body>
</html>

更新 2：更改 wp_enqueue_style() 函数的顺序解决了问题，我必须先加载 bootstrap css，然后再加载我自己的 css像这样的文件：

wp_enqueue_style('fontAwesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('university_main_styles', get_stylesheet_uri(), NULL, microtime());

现在它甚至可以在没有 !important 显示的情况下工作。

Answer 1

你可以试试这个！

.site-header__menu-trigger {
      display: none !important;
    }

Answer 2

display: none; 无法工作的唯一原因是，如果它被具有更高优先级的其他 CSS 覆盖。

检查您是否正在使用 Bootstrap 或 TailwindCSS 之类的 CSS 库，它可能会覆盖您的 display: none; 规则。

如果您需要保留使用这些库，您可以像这样尝试使用 !important 属性：display: none !important;

编辑：

看了你的 HTML 我最初的假设被证明是正确的。 Font Awesome class fa 有一个内联属性 display: inline-block; 覆盖了你的 display 属性.

Answer 3

你的代码对我有用，问题可能是你没有他用于图标的库（FONTAWESOME），尝试在里面写<i class="site-header__menu-trigger fa fa-bars" aria-hidden="true">Hello</i>你看到了吗？如果你看到你好，这意味着你需要导入 fontawesome，到这里 https://fontawesome.com/start 看看如何做

display:none;不工作但 visibility:hidden；做

display:none; not working but visibility:hidden; does

css

visibility

display