我无法将显示应用于ul

Question

我有一个ul元素(页面上三个元素之一(，我不想在移动设备上显示。我正在尝试将display: none;应用于它，但它不起作用。代码不是我的，我只是使用了互联网上的模板，所以对我来说很容易，plz

Html部件

<section id="banner" class="major">
<div class="inner">
<header class="major">
<h1>This the title</h1>
</header>
<div class="content">
<p> and some text here </p>  
<ul class="actions">
<li><a href="#one" class="button next scrolly">A button</a></li>
</ul> 
</div>
</div>
</section>

我在CSS 中有什么

ul.actions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
cursor: default;
list-style: none;
margin-left: -1em;
padding-left: 0;
}
ul.actions li {
padding: 0 0 0 1em;
vertical-align: middle;
}
ul.actions.special {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
margin-left: 0;
}
ul.actions.special li:first-child {
padding-left: 0;
}
ul.actions.stacked {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
}
ul.actions.stacked li {
padding: 1.3em 0 0 0;
}
ul.actions.stacked li:first-child {
padding-top: 0;
}
ul.actions.fit {
width: calc(100% + 1em);
}
ul.actions.fit li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
width: 100%;
}
ul.actions.fit li > * {
width: 100%;
}
ul.actions.fit.stacked {
width: 100%;
} 

ul.actions用于整个页面的不同按钮：我在html部分向您展示的一个按钮和另外两个用于填写表单的按钮。所以，我添加了这段代码，但无法正常工作

@media screen and (max-width: 480px) {
#banner .actions  {
display: none;
}
}

Answer 1

您在错误的CSS文件中使用了此代码。

请使用正确的方法：

你提到的URL有这个CSShttps://html5up.net/uploads/demos/forty/assets/css/main.css

媒体查询@media screen和(最大宽度：480px(在这个css中提到。请去那里

请在此媒体查询中使用此位代码

#banner .actions {
display: none;
}

Answer 2

代码似乎运行良好，我不确定您是否在进行代码编辑之前在上述浏览器上打开了页面。在这种情况下，清除缓存可能会有所帮助。

Answer 3

该代码运行良好。

如果这在你的网站上不起作用，它似乎像任何其他声明一样覆盖了这些声明。

在样式声明中使用重要规则时，此声明将覆盖任何其他声明。

请将CSS规则与一起使用！重要，并在清除缓存后进行检查。

@media screen and (max-width: 480px) {
#banner .actions  {
display: none !important;
}
}