Css-id ' s ändern sich nicht, auf media queries

Meine Medien Abfrage nicht aktualisiert wird, richtig. Hier ist das test-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>

Hier ist meine 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%;
}

Nun,in den Medien-Abfrage, die ich ändern möchten die id-Nummer verde der Farbe rot.
Diese Methode funktioniert nicht,es funktioniert nur, wenn ich mehr spezifischen Beispiel, das ich verwenden

 body #verde

oder ich spezifische die Klasse und die id.
Die Frage ist
Warum funktioniert es nur wenn ich mich etwas konkreter?

Vielen Dank im Voraus

  • Fügen Sie die media-query nach. Es wird außer Kraft gesetzt, indem die wichtigsten "default-Medien Abfrage css
  • Was passiert, wenn Sie die Medien-Abfrage, am Ende der CSS-Datei, oder verwenden Sie !important?
InformationsquelleAutor Coogle | 2015-05-11
Schreibe einen Kommentar