未应用CSS媒体查询规则

Question

我的任务是对仪表板式网站上现有的小部件做一个小更新。当前的小部件在大屏幕上看起来很棒，但在较小的设备上却很糟糕。我试图添加一些CSS规则，只有当显示宽度在或低于768‘m时才能应用这些规则。

我使用Bootstrap做了一些响应性的设计。我还没有遇到自己的“媒体查询”。

这是CSS..。

@media (max-width: 768px) {  // Bootstrap sm.
    #sidenav { position: static; text-align: center; }
    #sidenav .primary-systems li {
        display: inline-block;
        width: auto;
    }
}
/* Stuff I added above;  stuff I inherited below */
#sidenav { width:265px; background-color: #fff; position: relative; left: -44px; top: 16px; border: 1px solid #000; padding: 8px 0; }
#sidenav ul { margin: 0; padding-left: 0; }
#sidenav div.hr { border-bottom: 1px dotted #353535; margin: 0 auto 15px auto; }
#sidenav li { list-style-image: none; list-style-type: none; margin-left: 0; }
#sidenav li a { white-space: nowrap; display: block; width: 170px; height: 50px; padding-left: 80px; font-family: 'lato'; font-weight: 400; line-height: 50px; font-size: 18px; color: #353535; text-decoration: none; background: transparent url("/jasig-widget-portlets/images/icons/sidenav.png") no-repeat 15px 0; }
#sidenav li a:hover { background-color: #f3f3f3; }
#sidenav .angel a { font-family:'Lato', sans-serif; background-position: 15px 0; }
#sidenav .web-advisor a { font-family:'Lato',sans-serif; background-position: 15px -50px; }
#sidenav .tartan-card a {font-family:'Lato',sans-serif; background-position: 15px -100px; }
#sidenav .course-schedule a {font-family:'Lato',sans-serif; background-position: 15px -150px; }
#sidenav .directory a {font-family:'Lato',sans-serif; background-position: 15px -200px; }
#sidenav .faq a {font-family:'Lato',sans-serif; background-position: 15px -250px; }
#sidenav .help-desk a {font-family:'Lato',sans-serif; background-position: 15px -300px; }
#sidenav .financial-aid a {font-family:'Lato',sans-serif; background-position: 15px -350px; }
#sidenav .transcripts a {font-family:'Lato',sans-serif; background-position: 15px -400px; }
#sidenav .important-dates a {font-family:'Lato',sans-serif; background-position: 15px -450px; }
#sidenav .semesters a {font-family:'Lato',sans-serif; display: none; }
#sidenav .banner { margin: 15px auto 15px 30px; }
#sidenav .support {font-family:'Lato',sans-serif; margin-top: 15px; padding-left: 20px; }
#sidenav p.secure {font-family:'Lato',sans-serif; margin: 20px; }
#sidenav p.server { margin-left: 24px; }

chrome工具在“源”选项卡中显示此文件的当前版本(不是缓存问题)。继承的CSS规则正常工作；我添加的行没有效果。当您查看Chrome工具中的元素时，它们甚至不会出现在覆盖的规则列表中。

有人能看到我错过了什么吗？

Answer 1

将媒体查询移到继承规则下面。CSS解析器将在按顺序解析文档时应用任何应用的规则。您需要在基本规则之后解析您的重写。

更新：作为附带说明，它不支持//注释，所以解析器可能会被// Bootstrap sn.弄糊涂。至少您的text-align和.primary-systems规则应该应用到当前的排序中。

Answer 2

您的选择器正被其他选择器覆盖，其特性与媒体查询中选择器之后发生的特性相同。

您可以了解更多关于css在w3c文档中的工作方式的信息。。

快速解决方案是将媒体查询移到其他选择器下面。