css - 试图理解 CSS 文件中的@media 查询

Question

在尝试弄清楚如何拉伸(stretch)导航栏以填充整个屏幕宽度的过程中，我遇到了另一个用户在此处发布的内容。我刚开始使用 bootstrap/css 东西。我试图弄清楚这个特定的 css 文件中发生了什么，但终究无法弄清楚。我有几个问题，是否有人可以回答。 CSS 文件包含以下代码:

@media (min-width: 640px) {
 /* 768px */
    .navbar {
        border-radius: 0px;
 /* 4px */
        ;
    }
}

@media (min-width: 640px) {
 /* 768px */
    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }

    .navbar-collapse.in {
        overflow-y: visible;
    }

    .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 640px) {
 /* 768px */
    .navbar-nav {
        float: left;
        margin: 0;
    }

    .navbar-nav > li {
        float: left;
    }

    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }
}

@media (min-width: 640px) {
 /* 768px */
    .navbar-toggle {
        display: none;
    }
}

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-left: 0px;
 /* -15px */
    margin-right: 0px;
 /* -15px */
    ;
}

.container-fluid {
    padding-left: 0px;
 /* 15px */
    padding-right: 0px;
 /* 15px */
    ;
}

.nav > li > a {
    padding-left: 5px;
 /* 15px */
    padding-right: 5px;
 /* 15px */
    ;
}

.navbar {
    border: none;
 /* 1px solid transparent */
    margin-bottom: 0px;
 /* 20px */
    ;
}

.navbar-collapse {
    max-height: none;
 /* 340px; */
    padding-left: 0px;
 /* 15px */
    padding-right: 0px;
 /* 15px */
    ;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #fff;
 /* #e7e7e7 */
    ;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
 /* #777 */
    ;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    background-color: #00752c;
 /* transparent */
    color: #fff;
 /* #333 */
    ;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: #00752c;
 /* #e7e7e7 */
    color: #fff;
 /* #555 */
    ;
}

.navbar-default .navbar-toggle:focus {
    background-color: transparent;
 /* #DDD */
    ;
}

.navbar-default .navbar-toggle:hover {
    background-color: #DDD;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
 /* #888 */
    ;
}

.navbar-nav {
    margin: auto;
 /* 7.5px -15px */
    ;
}

.navbar-toggle {
    margin-left: 15px;
 /* 0px */
    margin-right: 0px;
 /* 15px */
    float: left;
 /* right */
    ;
}

body, html {
    height: 100%;
    width: 100%;
}

@media (max-width: 639px) {
    .navbar-collapse {
        border-bottom: 1px solid;
        border-top: 1px solid;
    }
}

.clear {
    clear: both;
}

.navbar {
    z-index: 1;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a:focus {
    outline-style: none;
}

.navbar-nav {
    background-color: #009b3a;
}

#header nav {
    background-color: #009b3a;
    color: #fff;
    font-size: 13px;
    height: 50px;
    text-transform: uppercase;
}

#page {
    margin-left: auto;
    margin-right: auto;
    max-width: 620px;
}

我的问题是:

1) 为什么有 4 个 @media (min-width: 640px) 查询？我尝试将这 4 个组合成一个 @media 查询，但它破坏了代码。我不明白为什么。

2) 这样的事情到底发生了什么？

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse

3) 在这个 CSS 文件中，你有一些东西在不同的地方被多次引用

@media (min-width:640px) 

查询。例如:

你有

.navbar {
    border-radius: 0px; /* 4px */
}

在不同的@media 640px 查询中再次开始

.navbar {
border: none; /* 1px solid transparent */
margin-bottom: 0px; /* 20px */
}

为什么在这里引用了两次？我们不能将它合并到 .navbar 类中吗？

帮助菜鸟理解 CSS :)

谢谢

Answer 1

1. 这取决于您放置媒体查询的位置。请注意，它们出现在它们覆盖的样式之后。这是为了清楚起见。因为 CSS 是从上到下评估的，如果媒体在样式之上 - 它不会被覆盖。

2. is direct child of parent. Without this css will look anywhere inside parent element

3. 您展示的示例没有冲突 - 第二个不在媒体内部。如果存在冲突，后一个将覆盖文件中更高的一个。我会说这里的多种媒体是为了可读性

希望对您有所帮助。如果您想了解更多关于如何覆盖 CSS 类的信息，请玩一下这个 http://josh.github.io/css-explain/