CSS @media查询中断站点

Question

有没有人看到我在哪里用注释掉的媒体查询出错了?

他们工作，但破坏了页面上的其他元素。站点上只有一个元素具有.btn-primary-mast-reapply

类

.btn-primary-mast-reapply {
background-color: #FFB323;
border-color:transparent;
color:#0B4A74;
font-weight: 700;
}
/*@media ( max-width: 991px ) {
.btn-primary-mast-reapply {
background-color: #0B4A74;
color:#FFB323;
}*/
.btn-primary-mast-reapply:hover,
.btn-primary-mast-reapply:focus,
.btn-primary-mast-reapply:active,
.btn-primary-mast-reapply.active,
.btn-primary-mast-reapply.active.focus,
.btn-primary-mast-reapply.active:focus,
.btn-primary-mast-reapply.focus,
.btn-primary-mast-reapply.focus:active,
.btn-primary-mast-reapply:active:focus,
.btn-primary-mast-reapply:focus {
background-color: #FFBC3E;
border-color:transparent;
}
/*@media ( max-width: 991px ) {
.btn-primary-mast-reapply:hover,
.btn-primary-mast-reapply:focus,
.btn-primary-mast-reapply:active,
.btn-primary-mast-reapply.active,
.btn-primary-mast-reapply.active.focus,
.btn-primary-mast-reapply.active:focus,
.btn-primary-mast-reapply.focus,
.btn-primary-mast-reapply.focus:active,
.btn-primary-mast-reapply:active:focus,
.btn-primary-mast-reapply:focus {
background-color: #155d8c;
border-color:transparent;
color: #FFB323;
}
}*/ 

Answer 1

我注意到你的第一个媒体查询没有右括号。

...
@media ( max-width: 991px ) {
.btn-primary-mast-reapply {
background-color: #0B4A74;
color:#FFB323;
}
} <-- this one

Answer 2

在第一个注释部分中，您忘记使用}关闭作用域

Answer 3

在第一个@media

中缺少右括号

.btn-primary-mast-reapply {
background-color: #FFB323;
border-color: transparent;
color: #0B4A74;
font-weight: 700;
width: 200px;
}
@media (max-width: 991px) {
.btn-primary-mast-reapply {
background-color: #0B4A74;
color: #FFB323;
}
} /* <------ this guy right here */
.btn-primary-mast-reapply:hover,
.btn-primary-mast-reapply:focus,
.btn-primary-mast-reapply:active,
.btn-primary-mast-reapply.active,
.btn-primary-mast-reapply.active.focus,
.btn-primary-mast-reapply.active:focus,
.btn-primary-mast-reapply.focus,
.btn-primary-mast-reapply.focus:active,
.btn-primary-mast-reapply:active:focus,
.btn-primary-mast-reapply:focus {
background-color: #FFBC3E;
border-color: transparent;
}
@media (max-width: 991px) {
.btn-primary-mast-reapply:hover,
.btn-primary-mast-reapply:focus,
.btn-primary-mast-reapply:active,
.btn-primary-mast-reapply.active,
.btn-primary-mast-reapply.active.focus,
.btn-primary-mast-reapply.active:focus,
.btn-primary-mast-reapply.focus,
.btn-primary-mast-reapply.focus:active,
.btn-primary-mast-reapply:active:focus,
.btn-primary-mast-reapply:focus {
background-color: #155d8c;
border-color: transparent;
color: #FFB323;
}
}

<button class="btn-primary-mast-reapply">
Hi
</button>