[英]Css doesn't pick the right stylesheet
我已经为移动屏幕尺寸创建了一个显示/隐藏菜单,但是现在我的CSS遇到了问题。 我做了不同的CSS内容,因此当您缩小站点尺寸时,您实际上可以看到更改。 但是,由于我创建了显示/隐藏菜单,因此我的代码不再选择正确的CSS样式表。 它只会在32em时选择我的媒体查询,但是我为90、78、63、49、40和32 em做了一个。 而且除了32个查询之外,其他每个查询都不选择。 为什么??
的HTML
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Artikelpagina</title>
<link rel="stylesheet" href="Test-artikelpagina.css" type="text/css">
<link rel="stylesheet" type="text/css" media="screen" href="MediaQ.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>(function(){document.documentElement.className='js'})();</script>
</head>
<body>
<!-- header met logo & navigatie -->
<header class="welkom">
<h1>CMD Amsterdam - Intranet</h1>
<p>Communication and Multimedia Design is een ontwerpopleiding voor interactieve media in Amsterdam.</p>
<img src="cmd_logo.png" alt="cmd logo">
<nav id="nav" role="navigation">
<div class="show_menu_btn" data-target="#nav ul" data-shown-text="Sluit menu" data-hidden-text="Open menu">Open menu</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Opleiding</a></li>
<li><a href="#">Onderwijsprogramma</a></li>
<li><a href="#">Organisatie</a></li>
<li><a href="Formulier.html">Stages en projecten</a></li>
</ul>
</nav>
Java脚本
var show_menu = document.querySelector('.show_menu_btn');
show_menu.addEventListener('click', function() {
var target = document.querySelector(show_menu.getAttribute('data-target'));
if (target.style.display == "none") {
target.style.display = "block";
show_menu.innerHTML = show_menu.getAttribute('data-shown-text');
} else {
target.style.display = "none";
show_menu.innerHTML = show_menu.getAttribute('data-hidden-text');
}
});
的CSS
@media only screen and (max-width: 90em) {
.show_menu_btn {
display: none;
}
#nav ul {
display: block;
}
body {
width: 100%;
background-color: wheat;
-webkit-flex-wrap: wrap;
}
main>article>section>img {
width: 80%;
height: 40%;
transition: 1s ease-in-out;
}
main>article>section>img:hover {
transform: scale(1.5,1.5);
}
body>.welkom>#nav {
display: block;
flex-wrap: nowrap;
}
body>.welkom>#nav>ul {
background-color: transparent;
list-style: none;
display: inline-block;
width: 100%;
text-align: left;
text-decoration: none;
float: none;
font-size: 1em;
padding-left: 0em;
}
body>.welkom>#nav>ul>li {
background-color: white;
padding: 0.1em;
position: relative;
float: inherit;
padding: 0.25em 1em;
padding-bottom: 0.5em;
margin: 0em 2em 1em 0em;
text-align: center;
width: 90%;
}
main>article>section>video {
width: 100%;
}
main>article>header>picture>img {
width: 100%;
height: 100%;
}
}
/*-------------------------------------------------------------------*/
@media only screen and (max-width:78em) {
body {
width:96%;
}
main {
width: 71%;
}
footer {
flex-direction: column;
flex-wrap: wrap;
padding: 1em;
}
#sitemap {
margin-right: 1em;
order: 1;
width: 30%;
margin-left: 0em;
}
#contact {
margin-right: 1em;
width: 30%;
order: 3;
margin-left: 0em;
}
#search {
margin-right: 1em;
order: 4;
margin-left: 0em;
}
#about {
margin-right: 1em;
width: 30%;
order: 2;
margin-left: 0em;
}
#credits {
order: 5;
}
}
/*-------------------------------------------------------------------*/
@media only screen and (max-width: 63em) {
.no-js .show_menu_btn {
display: none;
}
.no-js #nav ul {
display: block;
}
body {
background-color: wheat;
width: 96%;
margin-left: 0.2em;
margin-right: 0.2em;
flex-direction: row;
-webkit-flex-wrap: wrap;
}
body>.welkom {
display: inline-block;
flex-direction: row;
vertical-align: top;
padding: 1em;
margin-bottom: 1em;
background-color: #FFC844;
position: relative;
width: 100%;
}
body>.welkom>#nav {
overflow: hidden;
}
body>.welkom>#nav>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 1em;
border-radius: 0.5em;
padding: 0.2em;
text-decoration: none;
list-style: none;
}
body>.welkom>nav>ul>li:first-of-type {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 10%;
}
body>.welkom>#nav>ul>li:nth-of-type(2) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 10%;
}
body>.welkom>#nav>ul>li:nth-of-type(3) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 25%;
}
body>.welkom>#nav>ul>li:nth-of-type(4) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 15%;
}
body>.welkom>#nav>ul>li:nth-of-type(5) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 20%;
}
main>article>section>img {
width: 35%;
height: 35%;
float: left;
padding-right: 1em;
}
main {
display: inline-block;
flex-direction: row;
vertical-align: top;
padding: 1em;
margin-bottom: 1em;
position: relative;
width: 100%;
}
main>article>header {
float: none;
}
main>article>header>picture>img {
width: 50%;
height: 50%;
float: left;
padding: 1em;
padding-top: 0em;
padding-bottom: 1em;
padding-left: 0em;
}
main>article>section>video {
width: 50%;
height: 50%;
display: block;
margin: 0 auto;
}
.related {
display: inline-block;
flex-direction: row;
vertical-align: top;
margin-bottom: 1em;
position: relative;
width: 45%;
}
.related>article>section>ul>li {
font-size: 0.7em;
}
article>section>ul>li a {
display: inline-block;
font-size: 1.5em;
}
main>form {
width: 100%;
}
main>fieldset {
padding-right: 0em;
width: 100%;
}
aside {
display: inline-block;
flex-direction: row;
vertical-align: top;
margin-bottom: 1em;
position: relative;
width: 45%;
}
footer {
flex-direction: column;
flex-wrap: wrap;
padding: 1em;
}
#sitemap {
margin-right: 1em;
order: 1;
width: 30%;
margin-left: 0em;
}
#contact {
margin-right: 1em;
width: 30%;
order: 3;
margin-left: 0em;
}
#search {
margin-right: 1em;
order: 4;
margin-left: 0em;
}
#about {
margin-right: 1em;
width: 30%;
order: 2;
margin-left: 0em;
}
#credits {
order: 5;
}
fieldset {
width: 40%;
}
}
/*--------------------------------------------------------------------*/
@media only screen and (max-width: 49em) {
.no-js .show_menu_btn {
display: none;
}
.no-js #nav ul {
display: block;
}
body {
width: 95%;
background-color: green;
}
body>.welkom>#nav>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 1em;
border-radius: 0.5em;
padding: 0.5em;
text-decoration: none;
list-style: none;
}
body>.welkom>#nav>ul>li:first-of-type {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 10%;
}
body>.welkom>#nav>ul>li:nth-of-type(2) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 10%;
}
body>.welkom>#nav>ul>li:nth-of-type(3) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 25%;
}
body>.welkom>#nav>ul>li:nth-of-type(4) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 15%;
}
body>.welkom>#nav>ul>li:nth-of-type(5) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 20%;
}
body>.welkom>#nav>ul>li {
font-size: 0.9em;
}
main {
width: 100%;
padding: 1em;
}
main>article>header>picture>img {
display: none;
}
main>article>section>video {
width: 100%;
}
main>article>section>img {
width: 50%;
margin-bottom: 0.5em;
}
.related {
width: 100%;
padding: 1em;
float: none;
}
.related>article>section>ul>li:first-of-type + li {
font-size: 0.8em;
}
.mededelingen {
border-radius: 0.5em;
background-color: #FFC844;
position: relative;
float: none;
display: inline-block;
width: 100%;
vertical-align: top;
padding-right: 1em;
}
aside {
width: 100%;
float: none;
padding: 1em;
}
.uitagenda {
border-radius: 0.5em;
background-color: #FFC844;
position: relative;
float: none;
display: inline-block;
width: 100%;
vertical-align: top;
padding-right: 1em;
}
footer {
flex-direction: column;
flex-wrap: wrap;
padding: 1em;
}
#sitemap {
margin-right: 1em;
order: 1;
width: 30%;
margin-left: 0em;
}
#contact {
margin-right: 1em;
width: 30%;
order: 3;
margin-left: 0em;
}
#search {
margin-right: 1em;
order: 4;
margin-left: 0em;
}
#about {
margin-right: 1em;
width: 30%;
order: 2;
margin-left: 0em;
}
#credits {
order: 5;
}
#feedback {
align-self: flex-end;
}
}
/*--------------------------------------------------------------------*/
@media screen and ( min-width: 40em ) {
.no-js .show_menu_btn {
display: none;
}
.no-js #nav ul {
display: block;
}
body {
width: 93%;
background-color: lavenderblush;
}
body>.welkom>#nav>ul>li:first-of-type {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 10%;
margin-right: 0em;
}
body>.welkom>#nav>ul>li:nth-of-type(2) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 15%;
margin-right: 0em;
}
body>.welkom>#nav>ul>li:nth-of-type(3) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 26%;
margin-right: 0em;
}
body>.welkom>#nav>ul>li:nth-of-type(4) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 15%;
}
body>.welkom>#nav>ul>li:nth-of-type(5) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 20%;
}
body>.welkom {
display: inline-block;
flex-direction: row;
vertical-align: top;
order: 1;
padding: 1em;
position: relative;
width: 100%;
margin: 0em;
}
body>.welkom>#nav {
display: block;
flex-wrap: nowrap;
}
body>.welkom>img {
display: none;
}
.welkom>p {
margin-top: 0em;
}
main {
flex-direction: column;
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-top: 1em;
padding: 1em;
}
main>article>section>video {
width: 100%;
}
main>article>section>img {
width: 100%;
height: 100%;
padding-bottom: 0.5em;
}
label {
width: 100%;
}
fieldset {
width: 90%;
}
aside {
display: flex;
flex-direction: column;
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-top: 1em;
padding: 1em;
float: none;
}
.related {
display: flex;
flex-direction: column;
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
float: none;
margin-top: 1em;
padding: 1em;
}
article>section>ul>li a {
display: inline-block;
font-size: 1.3em;
}
footer {
display: flex;
flex-direction: column;
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
padding: 0em;
}
#sitemap {
order: 1;
margin-right: 0em;
-webkit-flex-wrap: wrap;
margin-left: 1em;
width: 100%;
}
#contact {
order: 3;
margin-right: 0em;
-webkit-flex-wrap: wrap;
width: 100%;
}
#search {
order: 4;
margin-right: 0em;
-webkit-flex-wrap: wrap;
}
#about {
order: 2;
margin-right: 0em;
width: 100%;
padding-left: 0.5em;
-webkit-flex-wrap: wrap;
}
#credits {
order: 5;
width: 100%;
-webkit-flex-wrap: wrap;
}
#feedback {
order: 6;
-webkit-flex-wrap: wrap;
}
#about {
margin-right: 1em;
padding-left: 0.5em;
}
}
/*--------------------------------------------------------------------*/
@media only screen and (max-width: 32em) {
.no-js .show_menu_btn {
display: none;
}
.no-js #nav ul {
display: block;
}
.js .show_menu_btn {
display: block;
}
.js #nav ul { display: none; }
}
.show_menu_btn {
width: 75%;
margin: 0 auto;
padding: 0.3em;
cursor: pointer;
text-align: center;
background: #88b47f;
}
#nav ul {
display: block;
}
#nav ul li {
display: block;
text-align: center;
border-bottom: 1px solid #6f6f7a;
}
#nav ul li:hover {
background: #88b47f;
}
#nav ul a {
display: block;
font-size: 1em;
color: #eee;
border-bottom: none;
}
body {
width: 90%;
margin-right: 0;
padding: 0;
background-color: wheat;
}
body>.welkom {
display: inline-block;
flex-direction: row;
vertical-align: top;
order: 1;
padding: 1em;
margin-bottom: 1em;
position: relative;
width: 100%;
}
.welkom {
background-image: url(Banner.jpg);
}
body>.welkom {
margin-top: 0em;
margin-bottom: 0em;
}
body>.welkom>#nav {
display: block;
flex-wrap: nowrap;
}
body>.welkom>#nav>ul {
background-color: transparent;
list-style: none;
display: block;
width: 100%;
text-align: left;
text-decoration: none;
float: none;
font-size: 1em;
}
body>.welkom>#nav>ul>li:first-of-type {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 100%;
}
body>.welkom>#nav>ul>li:nth-of-type(2) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 100%;
}
body>.welkom>#nav>ul>li:nth-of-type(3) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 100%;
}
body>.welkom>#nav>ul>li:nth-of-type(4) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 100%;
}
body>.welkom>#nav>ul>li:nth-of-type(5) {
padding: 0em;
background-color: white;
border-radius: 0em;
padding: 0.5em;
margin: 0 .8em .8em 0;
width: 100%;
}
body>.welkom>img {
display: none;
}
.welkom>p:first-of-type {
color: white;
}
.welkom>p {
margin-top: 0em;
}
main {
flex-direction: column;
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-top: 1em;
padding: 1em;
}
main>article>section>video {
width: 100%;
}
main>article>section>img {
width: 100%;
height: 100%;
padding-bottom: 0.5em;
}
label {
width: 100%;
}
fieldset {
width: 90%;
}
aside {
display: flex;
flex-direction: column;
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin-top: 1em;
padding: 1em;
float: none;
}
.related {
display: flex;
flex-direction: column;
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
float: none;
margin-top: 1em;
padding: 1em;
}
article>section>ul>li a {
display: inline-block;
font-size: 1.3em;
}
footer {
display: flex;
flex-direction: column;
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
padding: 0em;
}
#sitemap {
order: 1;
margin-right: 0em;
-webkit-flex-wrap: wrap;
margin-left: 1em;
width: 100%;
}
#contact {
order: 3;
margin-right: 0em;
-webkit-flex-wrap: wrap;
width: 100%;
}
#search {
order: 4;
margin-right: 0em;
-webkit-flex-wrap: wrap;
}
#about {
order: 2;
margin-right: 0em;
width: 100%;
padding-left: 0.5em;
-webkit-flex-wrap: wrap;
}
#credits {
order: 5;
width: 100%;
-webkit-flex-wrap: wrap;
}
#feedback {
order: 6;
-webkit-flex-wrap: wrap;
}
#about {
margin-right: 1em;
padding-left: 0.5em;
}
}
您在本节中有一个额外的结束括号
@media only screen and (max-width: 32em) {
.no-js .show_menu_btn {
display: none;
}
.no-js #nav ul {
display: block;
}
.js .show_menu_btn {
display: block;
}
.js #nav ul {
display: none;
}
} /* this right here, take it out */
... /* more code here */
} /* closing bracket */
因此,该括号之后的其余样式均不在媒体查询范围内,并且无论如何
var show_menu = document.querySelector('.show_menu_btn'); show_menu.addEventListener('click', function () { var target = document.querySelector(show_menu.getAttribute('data-target')); if (target.style.display == "none") { target.style.display = "block"; show_menu.innerHTML = show_menu.getAttribute('data-shown-text'); } else { target.style.display = "none"; show_menu.innerHTML = show_menu.getAttribute('data-hidden-text'); } });
@media only screen and (max-width: 90em) { body { background: red; } } /*-------------------------------------------------------------------*/ @media only screen and (max-width:78em) { body { width:96%; background-color: blue; } } /*-------------------------------------------------------------------*/ @media only screen and (max-width: 63em) { body { background-color: yellow; } } /*--------------------------------------------------------------------*/ @media only screen and (max-width: 49em) { body { width: 95%; background-color: green; } } /*--------------------------------------------------------------------*/ @media screen and (max-width: 40em) { body { width: 93%; background-color: lavenderblush; } } /*--------------------------------------------------------------------*/ @media only screen and (max-width: 32em) { body { width: 90%; background-color: gray; } }
<header class="welkom"> <h1>CMD Amsterdam - Intranet</h1> <p>Communication and Multimedia Design is een ontwerpopleiding voor interactieve media in Amsterdam.</p> <img src="cmd_logo.png" alt="cmd logo"> <nav id="nav" role="navigation"> <div class="show_menu_btn" data-target="#nav ul" data-shown-text="Sluit menu" data-hidden-text="Open menu">Open menu</div> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Opleiding</a> </li> <li><a href="#">Onderwijsprogramma</a> </li> <li><a href="#">Organisatie</a> </li> <li><a href="Formulier.html">Stages en projecten</a> </li> </ul> </nav>
更新: min-width: 40em
应该是max-width: 40em
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.