我无法应用显示：ul没有

如何解决我无法应用显示：ul没有

我有一个ul元素（页面上的三个元素之一），我不想在移动设备上显示。我正在尝试将display: none;应用于它，但是它不起作用。 该代码不是我的，我只是使用了互联网上的模板，所以请放轻松，请

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

解决方法

代码似乎可以正常工作，我不确定在进行一些代码编辑之前是否在提到的浏览器中打开了页面。在这种情况下，清除缓存可能会有所帮助。

,

该代码可以正常工作。

如果这在您的网站上无法正常工作，似乎其他任何声明都可以覆盖此声明。

在样式声明上使用重要规则时，该声明将覆盖所有其他声明。

请对！important 使用CSS规则，并在清除缓存后进行检查。

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

,

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

请使用正确的方法：

您提到的网址具有此CSS https://html5up.net/uploads/demos/forty/assets/css/main.css

此CSS中提到了媒体查询 @media屏幕和（最大宽度：480px）。请去那里

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

#banner .actions {
 display: none;
}