当添加@media仅屏幕和(max-width: 1000px)代码中断?

Question

代码:

/* Header Height Adjustment*/
#ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {line-height: 89px;}

工作良好，但它做了一个小的调整，在移动版本的菜单箭头。

https://i.stack.imgur.com/dLutO.jpg

当试图将此更改仅包含到笔记本电脑版本时，通过添加@media only screen and (max-width: 1000px)/或/@media (max-width: 1000px)代码-li > a行变为红色，并且特定代码中断/重置。

/* Header Height Adjustment*/
@media only screen and (max-width: 1000px)
#ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {line-height: 89px;}

https://i.stack.imgur.com/tt61j.jpg

有什么我错过了吗?

非常感谢您的任何反馈

Answer 1

注意语法,请尝试

@media only screen and (max-width: 1000px) {
#ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {
line-height: 89px;
}
}

参考

Answer 2

媒体查询不是注释，从它的外观来看，我假设你有Java背景。

媒体查询包装了在{}中匹配时要应用的规则。

所以不用

@media only screen and (max-width: 1000px)
#ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {line-height: 89px;}

必须是

@media only screen and (max-width: 1000px) {
#ct-header-wrap.ct-header-layout9 .ct-main-menu > li > a {line-height: 89px;}
}