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

在试图找出如何拉伸导航栏以填充整个屏幕宽度的过程中，我遇到了另一个用户在这里发布的内容。我只是从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（最小宽度：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类中吗

帮助noob理解CSS:）

感谢您在合并它们时可能引入了一些语法错误，尤其是在没有缩进的情况下。拥有4个独立的查询可能只是组织代码的一种方式

2） 只有4个单独的选择器使用了

选择器，即直接子代/后代。它只会搜索孩子，而不会搜索孩子的孩子

3） 缺乏缩进阻碍了你。CSS的第一个块位于查询中，但第二个块不在查询中。我建议增加一些缩进，这样你就可以自己看了

针对评论：

鉴于此HTML：

<div class = "foo">
    <div class = "bar">
        <div class = "bar"></div>
    </div>
    <div class = "bar">
        <div class = "bar"></div>
    </div>
</div>

.foo.bar

将匹配每一个

.bar

，而

.foo>.bar

将只匹配父项为

.foo

的

.bar

。它将与内部

.bar

不匹配，因为它们的父项是

.bar

这取决于您将媒体查询放在何处。请注意，它们出现在它们所替代的样式之后。这是为了澄清。因为CSS是从上到下计算的，如果媒体位于样式之上，它将不会被覆盖

是父母的直系子女。如果不使用此css，将查找父元素中的任何位置

您所展示的示例并不矛盾-第二个示例不在介质中。如果存在冲突，后一个冲突将覆盖文件中较高的一个冲突。我想说这里的多媒体是为了可读性

---

希望有帮助。如果您想了解更多有关CSS类如何被覆盖的信息，请使用此选项。是的，您可以组合所有4个媒体查询……它们都包含在内……因为这是一项草率的工作？基本上，这是一种判断：可能每一个都是在不同的时间添加的，它们都是为了在某一点上被缩小。或者，这是在生产和它不是最好的样式表。您可以将它们全部添加到一个媒体查询中，边框：none将覆盖整个边框声明，但边框半径不包括在内（asfaik，在短边框样式声明中）。如果是并且我错了，我认为同样适用于短边框形式下的everything属性重置为none样式。

---

最后一个问题，

是子组合选择器，它只选择元素的子后代元素/类/id/，等等。因此

ul>li

只会选择无序列表的直接后代列表项，其中as

ul li

会选择无序列表下的所有列表项。

如果没有开发人员的帮助，您的一些问题很难回答，但这里以下是我最好的猜测：

1） 为什么有4个@media（最小宽度：640px）查询

引导css文件不是用css开发的，而是编译的结果。这些查询和css规则最初可能被分割成几个文件，而这正是编译器决定将它们全部压缩在一起的方式

至于为什么在您尝试它时它不起作用，在没有看到代码的情况下很难说，但是正如TreeTree所建议的，您可能意外地引入了语法错误（可能您遗漏了某个大括号？）。但你是对的，一切都是正确的，这些规则可以包装在一个

@media

查询中

2） 像这样的事情到底发生了什么

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

大于

符号是子选择器

.container>.navbar header

表示仅当它是

.container

的直接子项时，才将这些规则应用于

.navbar header

3） 在这个CSS文件中，您在不同的[

@media

]查询中多次引用了一些内容。。为什么这里引用了两次

---

同样，这可能只是将较少的文件编译成单个css文件的产物。如果您是手工编写css，那么您认为可以将它们组合成单个规则是正确的。我们的编译器并不总是那么聪明，但它们可能不需要聪明——这些类型的文件通常不会被人读取，而且对性能的影响很小（如果有的话）。

谢谢大家。我现在肯定更了解CSS了。我想我只是不幸遇到了这样一个案例，格式使我很难理解发生了什么。当你刚开始工作的时候，这种事情肯定不会有帮助

请使用改进CSS中的“键入”并更新您的问题。在代码为

的情况下，使用链接按要求更新CSS代码。导航栏固定顶部。导航栏折叠，.navbar静态顶部。导航栏折叠，.navbar固定底部。导航栏折叠

没有>父项是第一项，子项是第二项吗（用逗号分隔不同的组）@user3619165编辑了带解释的答案。这不完全是对你的问题的回答。这是可能的

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