Question

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

我使用Bootstrap进行了响应式设计。我没有必要滚动自己的@media查询。

这是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 dev工具在“源”选项卡中显示此文件的当前版本（不是缓存问题）。继承的CSS规则正在运行;我添加的行没有效果。当您查看Chrome开发工具中的元素时，它们甚至不会出现在被覆盖的规则列表中。

有人能看到我错过的东西吗？

Answer 1

将媒体查询移至继承规则下方。 CSS解析器将应用任何适用的规则，因为它按顺序解析文档。您需要在基本规则之后解析覆盖。

更新：作为旁注，CSS不支持//条评论，因此解析器可能会被// Bootstrap sn.弄糊涂。至少应使用当前订购时应用text-align和.primary-systems规则。

Answer 2

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

You can learn more about how the cascade works in css in the w3c docs

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

未应用CSS媒体查询规则

2 个答案: