以错误的语法读取媒体查询

Question

有一次我不小心在指定的移动视口中为我的媒体查询遗漏了一些正确的语法。它显示正确，这很棒，但我想使用正确的语法，并且很想知道为什么/如何发生这种情况。以下是涉及的样式。

/* Smartphones (Landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) 

    ul.ui-tabs-nav li.ui-state-active a {
    background-color: #C6C699;
    height: 17px;
    text-shadow: none;
    width: 77px;
    }

    .content .full header, .content .full .entry-summary, .content .full   .entry-content, .content .full .entry-meta, .content .full .edit-link {
    margin-top: 3px;
    padding: 15px;
    width: 100%;
    }

    #topbgimg { display: none; }

    #topvidarea {
    margin-left: 21%;
    margin-right: 20%;
    margin-top: -5px;
    max-width: 400px;
    }

    #topmenucontain { display: none; }

    .fmenu { display: none; }

    #clogo { display: none; }

    #youtube1, #youtube2 { display: none; }

    #wrapper {
        margin: 0 1em;
    }

    h1 {
        font-size: 2em;
    }

    #logoimg { display: none; }

    #notification {
    height: 200px;
    margin: 0;
    width: 100%;
    padding-top:20px;
    } 

    .ui-tabs .ui-tabs-nav li a {
    border: 3px solid white;
    color: white;
    }

    #branding {
        width: 100%;
        padding: 1em 0;
        margin: 0;
        text-align: center;
    }

    #topbtn, #topbtn2, #topbtn3 {
    width: 75px;
    }

    #topbtnbuy {
    background: none repeat scroll 0 0 #C6C699;
    border: 1px solid #C6C699;
    color: #333333;
    display: inline;
    float: left;
    font-family: Georgia;
    font-size: 12px;
    height: 42px;
    margin-right: 10px;
    margin-top: -1px;
    width: 25%;
    }

    a.box:link {
    min-width: 70%;
    } 

    nav#access {
    border-bottom: 1px dashed #CFCFCF;
    position: relative;
    text-align: center;
    }

    nav#access ul.menu li:nth-child(n+5) {
    display: none;
    }

    .content {
    min-height: 0;
    background-image: none !important;
    border-bottom: 1px dashed #CFCFCF;
    }

    /* Hide Background & Overlay Images */
    .overlay {
    display: none;
    }

    .has-background {
    min-height: 0;
    }

    .content header, .content .entry-summary, 
    .content .entry-content, .content .edit-link, 
    footer.entry-meta {
    width: 100%;
    }

    .content header, .has-background header {
    margin-top: 2em;
    }

    .content header h2 a, .single .content header h2 {
    font-size: 2em;
    }

    .content section.right, 
    .content section.left,
    .content section.full,
    .content section.center {
        padding: 0;
    }

    .content section.center header, 
    .content section.center .entry-summary, 
    .content section.center .entry-content, 
    .content section.center .edit-link,
    .content section.center footer.entry-meta,
    .content section.right header, 
    .content section.right .entry-summary, 
    .content section.right .entry-content, 
    .content section.right .edit-link,
    .content section.right footer.entry-meta  {
        left: 0;
    }

    #comments {
        margin: 1em 0;
    }

    #comment, #commentform input, 
    #commentform #submit, #commentform #comment {
        width: 416px;
    }

    .commentlist {
        width: 424px;
    }

    #commentform #submit {
        width: 430px;
    }
    #comments, #commentform #comment-reply {
        width: 100%;
    }

    .cat-links, .entry-meta .sep:nth-child(n+4),
    .comments-link, .edit-link {
        display: none;
    }

    /* Footer */
    #footer {
        width: 100%;
        padding: 1em 0;
    }

    #footer-widgets {
        margin-bottom: 1em;
    }

    #footer .widget {
        width: 45%;
        margin: 0.5em 0;
    }

    .third-box {
        width: 89%; 
    }

    #buybutton { width: 95%; }

    .scrolldowntext { margin-top: 40px; }

    #notification {
    background-color: #333333;
    border-bottom: 5px solid #C6C699;
    font-size: 22px;
    height: 200px;
    padding-top: 20px;
    position: absolute;
    width: 100%;
    z-index: 9990;
    }

    #topcaption {
    display: none;
    }

    #logoimg { display: none;}

    #topmenucontain { 
    margin: -33px auto 0;
    width: 50%; }

    a.box:link {
    color: #C6C699;
    display: inline;
    float: left;
    font-family: Georgia;
    font-size: 12px;
    height: 50px;
    margin-right: 10px;
    min-width: 75px;
    }   

    #videoscreenshot { height: 215px; width: 100%; }

    .fancybox-iframe { display: hidden; }

}

一旦我在“@media only screen and (min-width: 320px) and (max-width: 480px)”末尾省略了额外的 { 我的所有媒体查询都被读取了吗？

更新：刚刚尝试删除上述指定视口中的所有样式，以尝试从头开始正确地以防某些样式是什么。 但是，在开始时，我只是想隐藏视口中的顶部菜单。并且由于某种原因这被忽略并且不呈现？

/* Smartphones (Landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {


#topvidarea {
    margin-left: 24%;
    margin-right: 20%;
    margin-top: -265px;
    max-width: 400px;
}

#topmenucontain { display: none; }

}

Answer 1

媒体查询中没有左括号，但有右括号：

@media only screen and (min-width: 320px) and (max-width: 480px) {
   ......
}

所有其他媒体查询可能被读取，因为您没有正确关闭第一个查询，因此查询不知道从哪里开始和结束。