Css 显示：无；不工作但可视：隐藏；做_Css_Visibility_Display

Css 显示：无；不工作但可视：隐藏；做

css

Css 显示：无；不工作但可视：隐藏；做,css,visibility,display,Css,Visibility,Display,当屏幕达到一定宽度时，我试图隐藏我的菜单，但出于某种原因，display:none不起作用，但visibility:hidden起作用。我使用的是教程中人物的确切代码（取自他上传的css文件），对他有效，但对我无效？我理解两者之间的区别，但我不理解为什么一个隐藏元素，而另一个出于某种原因不隐藏。这是css代码： .site-header__menu-trigger { color: #FFF; cursor: pointer; font-size: 1.2rem;

当屏幕达到一定宽度时，我试图隐藏我的菜单，但出于某种原因，

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>

现在，它甚至可以在没有！重要的隐藏显示。

您可以试试这个

.site-header\uu菜单-trigger{
显示：无！重要；
}

你可以试试这个

.site-header\uu菜单-trigger{
显示：无！重要；
}显示的唯一原因：无不起作用
检查您是否正在使用CSS库，如Bootstrap
或TailwindCSS
，它可能会覆盖您的显示：无规则
如果需要继续使用这些库，可以尝试使用！重要的
属性如下：显示：无！重要的
编辑：
在看了你的HTML后，我最初的假设被证明是正确的。
字体类fa
有一个内联属性display:inline块显示属性的代码>。
显示的唯一原因：无不起作用
检查您是否正在使用CSS库，如Bootstrap
或TailwindCSS
，它可能会覆盖您的显示：无规则
如果需要继续使用这些库，可以尝试使用！重要的
属性如下：显示：无！重要的
编辑：
在看了你的HTML后，我最初的假设被证明是正确的。
字体类fa
有一个内联属性display:inline块将覆盖您的显示属性。
您的代码对我有效，问题可能是您没有他用于图标的库（FONTAWESOME），请尝试在Hello中写入，您看到了吗？
如果您看到Hello，这意味着您需要导入Fontsome，请转到此处https://fontawesome.com/start
要了解如何做到这一点
您的代码对我有效，问题可能是您没有他用于图标的库（FONTAWESOME），请尝试在Hello中写入，您看到了吗？
如果您看到Hello，这意味着您需要导入Fontsome，请转到此处https://fontawesome.com/start
要了解如何做到这一点
您可以提供一个工作示例吗？在代码片段（这里是stackoverflow）或一些在线sandox（例如JSFIDLE）中，请向我们展示您的htmlShow完整的代码，如果您不提供完整的代码，我们将无法帮助您。您是否使用bootstrap之类的库？可能库css应用了一个！元素的“显示”属性的重要规则。这可以解释为什么可见性有效。请尝试显示：无！重要的你能提供一个工作示例吗？在代码片段（这里是stackoverflow）或一些在线sandox（例如JSFIDLE）中，请向我们展示您的htmlShow完整的代码，如果您不提供完整的代码，我们将无法帮助您。您是否使用bootstrap之类的库？可能库css应用了一个！元素的“显示”属性的重要规则。这可以解释为什么可见性有效。请尝试显示：无！重要的这很好用，谢谢！我在菜单上使用的字体很棒，这会导致这个问题吗？@Rugo是的，这就是原因。请看我的编辑。哇，这个答案已经+8了…这个很好，谢谢！我在菜单上使用的字体很棒，这会导致这个问题吗？@Rugo是的，这就是原因。请看我的编辑。哇，这个答案已经+8了。。。
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());