Css id不会更改媒体查询

Question

Css id不会更改媒体查询

我的媒体查询未正确更新.这是测试html:

 <!DOCTYPE HTML>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <title>Test </title>
    </head>
    <body>
        <div class="row">
            <div id="verde" class="col-5">
                <h2>Lorem Site</h2>
                <h3>Test Site</h3>
            </div>
        </div>
        <div class="row">
<div class="col-12">
    <p>Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly strip steak tenderloin boudin. Landjaeger beef ham hock, doner bacon pork belly filet mignon tenderloin short loin beef ribs tongue. Bresaola salami short ribs venison, pastrami jerky landjaeger. Hamburger meatball cow pork loin ham. Sirloin tail venison jerky kevin. Turducken ribeye sirloin fatback tenderloin short loin. Boudin sirloin tail venison filet mignon rump leberkas landjaeger bacon shank beef ribs ground round. Tail boudin landjaeger rump, chuck shankle leberkas pork belly pork tongue brisket short ribs ground round. Strip steak jowl pork loin beef ribs, ribeye tail spare ribs rump</p>
</div>
        </div>
        <div class="row">

<div id="verde" class="col-4">
                <p> Col 4Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly strip steak tenderloin boudin. Landjaeger beef ham hock, doner bacon pork belly filet mignon tenderloin short loin beef ribs tongue. Bresaola salami short ribs venison, pastrami jerky landjaeger. Hamburger meatball cow pork loin ham. Sirloin tail venison jerky kevin. Turducken ribeye sirloin fatback tenderloin short loin. Boudin sirloin tail venison filet mignon rump leberkas landjaeger bacon shank beef ribs ground round. Tail boudin landjaeger rump, chuck shankle leberkas pork belly pork tongue brisket short ribs ground round. Strip steak jowl pork loin beef ribs, ribeye tail spare ribs rump</p>
            </div>
            <div id="verde" class="col-4">
                <p>Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly strip steak tenderloin boudin. Landjaeger beef ham hock, doner bacon pork belly filet mignon tenderloin short loin beef ribs tongue. Bresaola salami short ribs venison, pastrami jerky landjaeger. Hamburger meatball cow pork loin ham. Sirloin tail venison jerky kevin. Turducken ribeye sirloin fatback tenderloin short loin. Boudin sirloin tail venison filet mignon rump leberkas landjaeger bacon shank beef ribs ground round. Tail boudin landjaeger rump, chuck shankle leberkas pork belly pork tongue brisket short ribs ground round. Strip steak jowl pork loin beef ribs, ribeye tail spare ribs rump</p>
            </div>
            <div class="col-4">cOL4
                <p>Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly strip steak tenderloin boudin. Landjaeger beef ham hock, doner bacon pork belly filet mignon tenderloin short loin beef ribs tongue. Bresaola salami short ribs venison, pastrami jerky landjaeger. Hamburger meatball cow pork loin ham. Sirloin tail venison jerky kevin. Turducken ribeye sirloin fatback tenderloin short loin. Boudin sirloin tail venison filet mignon rump leberkas landjaeger bacon shank beef ribs ground round. Tail boudin landjaeger rump, chuck shankle leberkas pork belly pork tongue brisket short ribs ground round. Strip steak jowl pork loin beef ribs, ribeye tail spare ribs rump</p>
            </div>
        </div>
    </body>

</html>

Run Code Online (Sandbox Code Playgroud)

这是我的CSS

    @media screen and (max-width:760px){
     #verde{
        color:red;
    }
}
*{
    border: 1px solid red !important;
}
*{
    box-sizing:border-box;
}

p {
    margin: 10px;
}
#verde{
    color:green;
}
.row{
    width: 100%;
    margin:auto;
    display: flex;
    flex-wrap:wrap;
}
.col-1{
    width: 8.33%;
}
.col-2{
    width: 16.66%;
}
.col-3{
    width: 25%;
}
.col-4{
    width: 33.33%;

}
.col-5{
    width: 41.66%;
    margin-left:auto;
}
.col-6{
    width: 50%;
}
.col-7{
    width: 58.33%;
}
.col-8{
    width: 66.66%;
}
.col-9{
    width: 75%;
}
.col-10{
    width: 83.33%;
}
.col-11{
    width: 91.66%;
}
.col-12{
    width: 100%;
    margin-left:20%;
}

Run Code Online (Sandbox Code Playgroud)

现在,在媒体查询中我想将id #verde更改为红色.这种方法不起作用,只有在我使用时更具体,它才有效

 body #verde

Run Code Online (Sandbox Code Playgroud)

或者我具体说明了班级和身份证明.问题是为什么它只有在我更具体的情况下才有效？

提前致谢

Answer 1

Mat*_*gel 9

您需要将媒体查询放在样式表的末尾,因为样式是"级联"的方式

目前您的媒体查询是第一个,因此在此之后的任何事情都不会被覆盖.

...Everything before...

 @media screen and (max-width:760px){
     #verde{
        color:red;
    }
}

Run Code Online (Sandbox Code Playgroud)

这是一个JSFiddle,我重新安排了你的CSS.

归档时间：	10 年，8 月前
查看次数：	9303 次
最近记录：	10 年，8 月前