我的媒体查询没有正确更新。这是测试 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>
这是我的 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%;
}
现在，在媒体查询中我想将 id #verde 更改为红色。 这种方法不起作用，只有当我更具体时它才有效，例如我使用
body #verde
或者我指定类和 ID。 问题是 为什么只有当我更具体时它才有效？
提前致谢
最佳答案
您需要将媒体查询放在样式表的末尾，因为这是样式“级联”的方式
目前您的媒体查询排在第一位，因此之后的任何不更具体的内容都会被覆盖。
...Everything before...
@media screen and (max-width:760px){
#verde{
color:red;
}
}
关于html - Css id 不会因媒体查询而改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30173173/