Question

在试图找出如何拉伸导航栏以填满整个屏幕宽度的过程中，我遇到了另一个用户在这里发布的内容。我刚开始使用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类吗？

帮助一个菜鸟理解CSS：）

由于

Answer 1

1）合并它们时可能会引入一些语法错误，尤其是在根本没有缩进的情况下。有4个单独的查询可能只是组织代码的一种方法。

2）只有4个单独的选择器使用>选择器，这意味着直接的子/后代。它只会搜索孩子而不是孩子的孩子。 More about it here.

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

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仅匹配其父.bar的{{1}}。它与内部.foo不匹配，因为它们的父级为.bar。

Answer 2

这取决于您放置媒体查询的位置。请注意，它们出现在它们覆盖的样式之后。这是为了清楚起见。因为CSS是从上到下进行评估的，所以如果媒体位于样式之上 - 它将不会被覆盖。
是父母的直接子女。如果没有这个css，将会查找父元素
中的任何位置
您展示的示例并不冲突 - 第二个不在媒体内部。如果发生冲突，后者将覆盖文件中的一个更高的冲突。我想说这里的多媒体是为了便于阅读

希望有所帮助。如果您想了解有关如何覆盖CSS类http://josh.github.io/css-explain/

Answer 3

是的，你可以将所有4个媒体查询结合起来......它们都包括在内......因为这是草率的工作？基本上它是一个判断调用：可能每个都是在不同的时间添加的，并且它们意味着在某些时候被缩小。或者那是生产中的，而不是最好的样式表。你可以将它们全部添加到一个媒体查询中，border：none将覆盖整个边界声明，但不包括border-radius（asfaik，i don't see it on dev.moz在短边框样式声明中。如果它是的，我错了，我认为同样适用，在短边界形式下的所有财产都被重置为无风格。
最后一个问题，>是子组合子选择器，它只选择在选择器之前命名的元素/类/ ids /等的子后代元素。因此ul > li只会选择作为无序列表的直接后代的列表项，而ul li将选择属于无序列表的所有列表项。

Answer 4

如果没有听取开发人员的意见，你的一些问题很难回答，但这是我最好的猜测：

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

bootstrap css文件不是用css开发的，而是many LESS files的编译结果。这些查询和css规则最初可能已拆分为多个文件，而这正是编译器决定将它们整合在一起的方式。

至于为什么当你尝试它时这不起作用，很难说没有看到你的代码，但正如TreeTree建议的那样，你可能不小心引入了语法错误（也许你错过了某个大括号？）。但是你是对的，所有事情都是正确的，这些规则可以包含在一个@media查询中。

2）这样的事情究竟发生了什么？

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

大于>的符号是子选择器。 .container > .navbar-header表示仅在.navbar-header

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

3）在这个CSS文件中，您在不同的[@media]查询中多次引用了一些内容。为什么在这里引用了两次？

同样，这可能只是已编译的LESS文件到单个css文件中的工件。如果你是手工编写css，那么你认为它们可以组合成一个规则是正确的。我们的编译器并不总是那么聪明，但它们可能并不需要 - 这些类型的文件通常不会被人阅读，并且对性能的影响很小（如果有的话）。

Answer 5

谢谢大家。我现在肯定能理解CSS了。我想我只是因为格式化使得很难理解发生了什么的情况而感到不幸。当你刚开始时，这种事情肯定没有帮助。

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

5 个答案: