媒体查询需要 !important 才能工作，即使它位于我的 css 的底部并且我没有内联 css

Question

我在这里看到很多问题，人们需要使用 !important 但他们有内联 CSS 不会被覆盖。我没有任何内联 CSS。我将 SCSS 与单个 SCSS 文件一起使用。

实际上我在上一个项目中也注意到了这一点。我需要在媒体查询中使用 !important，但我正在尝试使用 TailwindCSS，所以我认为它与此有关。在 Tailwind 项目中，我没有使用 SCSS。

据我所知，一切都按正确的顺序进行。从技术上讲，我只使用一个 CSS 文件，因此那里的顺序应该没有问题。我唯一能想到的是 Font Awesome 或 jQuery 的问题，但我认为这不是问题所在。老实说，我对这个问题可能是什么感到茫然。我觉得我在做一些愚蠢的事情。

我唯一能想到的另一件事是 Visual Studio 代码的实时服务器扩展可能有问题？最近对我来说事情一直很麻烦。当我启动实时服务器时，它会以 150% 的缩放比例打开本地主机选项卡。而今天，如果我使用开发工具，它会随机生成 200 像素高的文本。我需要关闭开发工具并重新打开它们以使其看起来正确。

下面是代码片段，但如果这还不够，我已将此项目更新为 GitHub 存储库：https://github.com/rperry99/theEssen/

这是我的主 SCSS 文件中的内容，我将在其中导入所有其他文件：

@import "helpers.scss";
@import "normalize.scss";
@import "nav.scss";

@import "mediaQueries.scss";

我检查了输出 CSS 文件，媒体查询在底部，它们应该是这样的：

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,700;1,400&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", Arial, Helvetica, sans-serif; }

body {
  overflow-x: hidden; }

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  position: relative; }
  nav #logo {
    color: #dd6031;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold; }
  nav #hamburger {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column; }
    nav #hamburger .bar {
      width: 100%;
      background: #dd6031;
      height: 5px;
      border-radius: 5px; }
    nav #hamburger:hover {
      cursor: pointer; }
  nav #navContent {
    background: #f1f6ef;
    padding: 1rem;
    height: 100vh;
    width: 50vw;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    transition: opacity 300ms ease; }
    nav #navContent a {
      color: #dd6031;
      text-decoration: none;
      font-size: 1.5rem; }
      nav #navContent a:hover {
        color: #eba489;
        cursor: pointer; }
    nav #navContent .close {
      position: absolute;
      right: 0;
      top: 0;
      margin: 1rem;
      font-size: 2rem;
      font-weight: bold; }
    nav #navContent .socials {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 75%; }

.hide {
  opacity: 0;
  right: -9999px;
  top: -9999px; }

.show {
  right: 0;
  top: 0;
  opacity: 1; }

@media (min-width: 767px) {
  nav {
    align-items: flex-end; }
  #navContent {
    right: 0 !important;
    top: 0 !important;
    opacity: 1 !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    background: none !important;
    width: max-content !important; }
    #navContent a {
      margin-right: 20px; }
  #hamburger,
  .close {
    display: none !important; }
  .socials {
    width: max-content !important; } }

我已经在没有 !important 的情况下测试了每个属性并且每个拥有它的人都需要它，否则它将无法工作。这是我的媒体查询部分：

@media (min-width: 767px) {
  nav {
    align-items: flex-end;
  }
  #navContent {
    right: 0 !important;
    top: 0 !important;
    opacity: 1 !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    background: none !important;
    width: max-content !important;
    a {
      margin-right: 20px;
    }
  }
  #hamburger,
  .close {
    display: none !important;
  }
  .socials {
    width: max-content !important;
  }
}

这是我的HTML供参考：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Essen</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <nav>
      <a href="#" id="logo">The Essen</a>
      <div id="hamburger">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
      <div id="navContent" class="hide">
        <a class="close">X</a>
        <a href="#">about</a>
        <a href="#">recipies</a>
        <a href="#">gallery</a>
        <div class="socials">
          <a href="#" class="social fa fa-facebook"></a>
          <a href="#" class="social fa fa-instagram"></a>
          <a href="#" class="social fa fa-twitter"></a>
          <a href="#" class="social fa fa-pinterest"></a>
        </div>
      </div>
    </nav>
    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>
    <script src="app.js"></script>
  </body>
</html>

Answer 1

这是特异性的问题。只需在媒体查询中使用 nav #navContent 而不是 #navContent 作为选择器，就不需要 !important。与其他规则类似：在媒体查询中，始终使用至少与通用规则中相应选择器一样具体的选择器。

Answer 2

兄弟，你在开玩笑吧？只是将 CSS 放在其他 CSS 之下并不能赋予它覆盖的权利。 This is only valid scenario if the conflict involves same classes, same ids, same elements, etc. 在 99% 的情况下 combination used at different places 是不同的。

CSS特异性

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#:~:text=Specificity%20is%20a%20weight%20that,type%20in%20the%20matching%20selector.&text=As%20per%20CSS%20rules%2C%20directly,element%20inherits%20from%20its%20ancestor.

媒体查询需要 !important 才能工作，即使它位于我的 css 的底部并且我没有内联 css

Media queries are requiring !important to work even though its at the bottom of my css and I have no inline css

css

css-selectors

media-queries