显示：无；无法运作，但能见度：隐藏；确实

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;
    }
  }

Run Code Online (Sandbox Code Playgroud)

更新：对不起，这是我的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>

Run Code Online (Sandbox Code Playgroud)

更新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());

Run Code Online (Sandbox Code Playgroud)

现在，即使没有显示！

Answer 1

dmu*_*rer 7

display: none;不起作用的唯一原因是，如果它被更高优先级的其他CSS覆盖。

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

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

编辑：

看完您的HTML之后，我的最初假设被证明是正确的。Font Awesome类fa具有一个内联属性display: inline-block;，该属性会覆盖您的display属性。

归档时间：	6 年，4 月前
查看次数：	93 次
最近记录：	6 年，4 月前