html - 特定 ID 的 CSS 媒体查询

Question

我尝试在 CSS 中使用只能在网页首页上运行的媒体查询。首页的 ID 在其正文中定义为 index。这个首页基本上使用两列(.aside 和 .main)，我想避免在首页上使用它，但仍然在其他页面上使用它。

当我在不指定 ID 的情况下尝试此 CSS 时，.aside 列确实离开了(在所有页面上)，但是一旦我尝试添加 #index(到仅在首页上使用它)它停止工作。

@media only screen and (min-width: 500px) {
    #index {
        .aside.col-lg-pull-9 {
            right: 100% !important;
        }
        .main.col-lg-push-3 {
            left: 0% !important;
        }
        .aside.col-lg-3 {
            width: 0% !important;
        }
        .main.col-lg-9 {
            width: 100% !important;
        }
    }
}

Answer 1

如 Hidden Hobbes 所说，处理此问题的理想方法是使用预处理器，例如 SASS。 SASS 被转译为 CSS，然后加载到浏览器中。它消除了重复的 CSS，使开发速度更快，代码更易于理解。

根据您正在开发的框架(如果有)，您应该能够找到合适的 SASS/SCSS 模块以用于您的元素。如果您目前没有使用框架，我偏向于建议使用 HarpJS，它包括几个用于 CSS 和 HTML 的预处理模块。

引用资料:

• SASS:http://sass-lang.com
• HarpJS:http://harpjs.com