html - CSS 显示 :none not working with media query

Question

我有一个网站，我正试图使其响应。所以我需要在 850px 以下时隐藏一个 anchor 。代码大致如下所示:

我想要的是，默认显示第一个 anchor (#tryitnow)，当屏幕小于 850px 时显示另一个 anchor (#tryitnow1)。

div#container div#layout div#slot1 a#tryitnow {
  display: inline;
  position: absolute;
  top: 90px;
  right: 75px;
}
div#container div#layout div#slot1 a#tryitnow1 {
  display: none;
}

@media all and (max-width: 850px) {
    div#container div#layout div#slot1 a#tryitnow1 {
      display: inline;
      position: relative;
      margin-right:auto;    
      margin-left:5;    
    }
      div#container div#layout div#slot1 a#tryitnow {
      display: none
    }
 }

    <a href="javascript:void(0);" class="sign-up-button" id="tryitnow"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>
    <div id="are-you-a-visionary">
       Bla bla some paragraphs
    </div>
    <a href="javascript:void(0);" class="sign-up-button" id="tryitnow1"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>

但是，无论屏幕大小如何，只有 anchor #tryitnow1 始终可见。 #tryitnow 总是被隐藏。

为什么？能否请你帮忙？谢谢!

Answer 1

问题是，您的 css 选择器没有指向正确...尝试以下操作:

div#container div#layout div#slot1 a#tryitnow {
  display: inline;
  position: absolute;
  top: 90px;
  right: 75px;
}
#tryitnow1 {
  display: none;
}

@media all and (max-width: 850px) {
    #tryitnow1 {
      display: inline;
      position: relative;
      margin-right:auto;    
      margin-left:5;    
    }
      #tryitnow {
      display: none
    }
 }

<a href="javascript:void(0);" class="sign-up-button" id="tryitnow"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>
<div id="are-you-a-visionary">
   Bla bla some paragraphs
</div>
<a href="javascript:void(0);" class="sign-up-button" id="tryitnow1"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>