Question

我在html / css课程中进行了一次测验，我要求我使用媒体查询根据屏幕大小重新组织一些div。他们提供的我应该添加的代码是：

<style type="text/css">
  /*
  These are the responsive styles. Throw some breakpoints in here!
  */
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    width: 100%;
  }

  @media screen and (max-width: 400px) {
    .dark_blue {
      color: blue;
    }
  }
</style>

除此之外还有很多，但那是相关的部分。我想出了这个：

<style type="text/css">
  /*
  These are the responsive styles. Throw some breakpoints in here!
  */
  @media screen and (min-width: 450px) {
   .light_blue, .green {
    width: 50%;
    }
  }
  @media screen and (min-width: 550px) {
    .red {
      width: 33.3%;
    }
    .orange {
      width: 66.6%;
    }
  }
  @media screen and (min-width: 800px) {
    .container {
      width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    width: 100%;
  }

  @media screen and (max-width: 400px) {
    .dark_blue {
      color: blue;
    }
  }
</style>

但它确实没什么。该页面完全没有变化。我最终放弃了，看了看答案，他们写的CSS与我的CSS完全相同，只是顺序不同：

<style type="text/css">
  /*
  These are the responsive styles. Throw some breakpoints in here!
  */
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    width: 100%;
  }

  @media screen and (min-width: 450px) {
   .light_blue, .green {
    width: 50%;
    }
  }
  @media screen and (min-width: 550px) {
    .red {
      width: 33.3%;
    }
    .orange {
      width: 66.6%;
    }
  }
  @media screen and (min-width: 800px) {
    .container {
      width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media screen and (max-width: 400px) {
    .dark_blue {
      color: blue;
    }
  }
</style>

所以我的问题是，如何在此处应用订单以及为什么我的代码根本没有做任何事情？

Answer 1

CSS代表层叠样式表，因此规则将被解释为级联，所以如果你有

.blue { color: blue; }

然后在同一个CSS文件中放入

.blue { color: pink; }

它会覆盖color .blue到pink

对于媒体查询，您希望先添加默认样式，然后添加媒体查询，因为它会首先检测媒体查询，然后只使用这些规则而不是默认样式。

由于浏览器能够检测到（例如）您的设备min-width为800px，因此它会选择这些样式，并且在文件被进一步解释时不会费心覆盖它们在默认样式中

很难解释。希望有点清楚

样式标记中的CSS顺序

1 个答案: