问题描述
我的文字原来是白色的。将浏览器的宽度更改为小于500px时，我希望文本变为蓝色。我已经尝试了多种方法并落在了该方法上，但无法正常工作。任何帮助，将不胜感激。媒体查询位于最底部。我不确定这是否与覆盖某个地方有关，因为媒体查询位于css文件的最底部，所以我无法想象是这种情况。
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
-webkit-Box-sizing: border-Box;
Box-sizing: border-Box;
}
body {
color: white;
font-family: 'Montserrat',sans-serif;
}
h1 {
font-size: 2.5rem;
font-family: 'Lobster',sans-serif;
font-weight: lighter;
}
h2 {
font-size: 8rem;
font-family: 'Lobster',sans-serif;
font-weight: lighter;
}
h3 {
font-size: 3.5rem;
font-family: 'Lobster',sans-serif;
font-weight: lighter;
}
h4 {
font-size: 3rem;
}
p {
font-size: 2.5rem;
}
li {
font-size: 2rem;
}
a {
color: white;
}
.home {
background: radial-gradient(#5c523d,#131313);
}
.nav-container {
background: #070707;
}
nav {
width: 80%;
margin: auto;
min-height: 10vh;
padding: 3rem 0rem;
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
-webkit-Box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-Box-align: center;
-ms-flex-align: center;
align-items: center;
}
nav a {
text-decoration: none;
}
nav ul {
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
-webkit-Box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-Box-flex: 1;
-ms-flex: 1;
flex: 1;
list-style: none;
}
nav #logo {
-webkit-Box-flex: 1.5;
-ms-flex: 1.5;
flex: 1.5;
position: relative;
}
nav #logo::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 16rem;
height: 6rem;
background: #5c523d;
border-radius: 50%;
-webkit-transform: translate(-10%,-20%);
transform: translate(-10%,-20%);
mix-blend-mode: screen;
}
nav .order {
background: #5c523d;
padding: 1rem 2rem;
border-radius: 2rem;
}
nav .prices {
background: #5c523d;
padding: 1rem 2rem;
border-radius: 2rem;
}
nav .about {
background: #5c523d;
padding: 1rem 2rem;
border-radius: 2rem;
}
.showcase {
display: -ms-grid;
display: grid;
min-height: 90vh;
-ms-grid-columns: 10% (minmax(5rem,1fr))[3] 10%;
grid-template-columns: 10% repeat(3,minmax(5rem,1fr)) 10%;
-ms-grid-rows: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.showcase h2 {
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-column: 2/3;
-ms-flex-item-align: end;
align-self: flex-end;
font-size: 6rem;
}
.about .pic {
height: 50vh;
width: 65vh;
margin-bottom: 40px;
border-radius: 20%;
}
.rev-section {
margin: auto;
padding: 0 1rem;
max-width: 1100px;
text-align: center;
}
.review-container {
background: #323232;
height: 100vh;
}
.review-container #intro {
font-size: 2.5rem;
font-family: 'Lobster',sans-serif;
font-weight: lighter;
width: 80%;
}
.review .review-content {
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
-webkit-Box-orient: vertical;
-webkit-Box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-Box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* align horizontal */
-webkit-Box-align: center;
-ms-flex-align: center;
align-items: center;
}
/*# sourceMappingURL=style.css.map */
@media (max-width: 500px) {
body {
color: blue;
}
}
以下是我的html：
<!DOCTYPE html>
<html Lang="en">
<head>
<Meta charset="UTF-8">
<!-- <Meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<Meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://js.stripe.com/v3/"></script>
<script src="pay.js" type="text/javascript" defer></script>
<script src="review.js" type="text/javascript" defer></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/44f557ccce.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<!-- font-family: 'Lobster',cursive; -->
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:ital@1&display=swap" rel="stylesheet">
<!-- font-family: 'Lobster',cursive;
font-family: 'Montserrat',sans-serif;-->
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Math Website</title>
<body>
<main>
<div class="nav-container">
<nav>
<h1 id="logo">Simple Math!</h1>
<ul>
<li><a class="about" href="#">Home</a></li>
<li><a class="prices" href="#features-scroll">Schedule Appt</a></li>
<li><a class="order" href="#about-scroll">About Me</a></li>
</ul>
</nav>
</div>
<section class="home">
<div class="showcase">
<h2>Simple Math</h2>
<img src="roman-mager-5mZ_M06Fc9g-unsplash.jpg" style="height:520px;width:520px" alt="">
<div class="info">
<h3 class="language">The only universal language</h3>
</div>
</div>
</section>
<div class="features-container">
<div id="features-scroll"></div>
<section class="features">
<h2>Book Appt</h2>
<p>
So how does this work? Just submit your payment down below to schedule
your session with me!
</p>
<form id="payment-form" class="sr-payment-form">
<div class="sr-combo-inputs-row">
<div class="sr-input sr-card-element" id="card-element"></div>
</div>
<div class="sr-field-error" id="card-errors" role="alert"></div>
<button id="submit">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay</span><span id="order-amount"></span>
</button>
</form>
</section>
<section></section>
</div>
<div id="about-scroll"></div>
<div class="about-container">
<section class="about">
<div class="about-logo">
<h2>About me</h2>
</div>
<div class="about-content">
<img class="pic" src="texas.JPG" alt="">
<p id="intro">
hey guys thanks for checking out my site! So what separates me from other tutors? Well it's my patience
and ability to explain things the way I wish someone Could've explained math to me when I was in school.. like a
Kindergardner! During our 1 hour sessions,we'll go through problem by problem,exploring each step of the solution
in depth,and throughly answering any of your questions along the way!
</p>
</div>
</section>
</div>
<div id="review-scroll"></div>
<div class="review-container">
<section class="review">
<div class="review-header">
<h2>Reviews</h2>
</div>
<div class="review-content">
<h2 class="title">Our guests love us</h2>
<p class="note">
lorem ipsum dolor sit amet consectetur adipscing elit. Nihil lbaorisam possimus preferendis non error neque
</p>
<div class="reviews">
<div class="review_two">
<div class="head-review">
<img src="youtube.png" width="100px" height="100px">
</div>
<div class="body-review">
<div class="name-review">
Jorge V
</div>
<div class="place-review">
San Diego
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="review_two">
<div class="head-review">
<img src="youtube.png" width="100px" height="100px">
</div>
<div class="body-review">
<div class="name-review">
Jorge V
</div>
<div class="place-review">
San Diego
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="review_two">
<div class="head-review">
<img src="youtube.png" width="100px" height="100px">
</div>
<div class="body-review">
<div class="name-review">
Jorge V
</div>
<div class="place-review">
San Diego
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="submit_review">
<h5>Like to submit a review? Please fill this out to recieve a code. Then use this code
to submit the review!
</h5>
<div class="input_form">
<form id="review_form">
<input type="text" label="phone number">
<input id="submit" type="submit">
</form>
</div>
<div>
Submit Review and Photo here!
</div>
</div> -->
</section>
</div>
</main>
</body>
</head>
</html>
解决方法
尝试body {color: blue !important}