为什么媒体查询只有在我的 CSS 中放在最后时才有效？

Question

我正在学习 css，我遇到了一个包含以下代码的示例：

<body>
   <a href="#" class="CardLink CardLink_Hearts">Hearts</a>
   <a href="#" class="CardLink CardLink_Clubs">Clubs</a>
   <a href="#" class="CardLink CardLink_Spades">Spades</a>
   <a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>
</body>

和css：

.CardLink {
    display: block;
    color: #666;
    text-shadow: 0 2px 0 #efefef;
    text-decoration: none;
    height: 2.75rem;
    line-height: 2.75rem;
    border-bottom: 1px solid #bbb;
    position: relative;
}

@media (min-width: 300px) {
    .CardLink {
        padding-left: 1.8rem;
        font-size: 1.6rem;
    }

    .CardLink:before {
        display: block;
    }
}

.CardLink:before {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.CardLink_Hearts:before {
    content: "❤";
}

.CardLink_Clubs:before {
    content: "♣";
}

.CardLink_Spades:before {
    content: "♠";
}

.CardLink_Diamonds:before {
    content: "♦";
}

/*@media (min-width: 300px) {
    .CardLink:before {
        display: block;
    }
}*/

想法是当视口尺寸低于 300px 时卡片图标不显示，否则显示它们。

我正在研究代码，但我不明白为什么我们必须定义两次 @media (min-width: 300px) 才能使代码按预期工作。

为什么我们不能将 css 最后一段的代码放到媒体屏幕尺寸所属的部分（良好的代码重用而不是再次声明）？

如果我这样做，则不会显示任何图标（这是下面的代码）。

谁能解释一下？检查 plunker，这按预期工作：https://plnkr.co/edit/MJAPdkgUegpUlJnkcQHg?p=preview

Answer 1

关于位置的问题，媒体查询放在:before之后就可以了

.CardLink {
  display: block;
  color: #666;
  text-shadow: 0 2px 0 #efefef;
  text-decoration: none;
  height: 2.75rem;
  line-height: 2.75rem;
  border-bottom: 1px solid #bbb;
  position: relative;
}
.CardLink:before {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.CardLink_Hearts:before {
  content: "❤";
}
.CardLink_Clubs:before {
  content: "♣";
}
.CardLink_Spades:before {
  content: "♠";
}
.CardLink_Diamonds:before {
  content: "♦";
}
@media (min-width: 300px) {
  .CardLink {
    padding-left: 1.8rem;
    font-size: 1.6rem;
  }
  .CardLink:before {
    display: block;
  }
}

<a href="#" class="CardLink CardLink_Hearts">Hearts</a>
<a href="#" class="CardLink CardLink_Clubs">Clubs</a>
<a href="#" class="CardLink CardLink_Spades">Spades</a>
<a href="#" class="CardLink CardLink_Diamonds">Diamonds</a>

Answer 2

因为您正在使用层叠样式表。

级联就像瀑布：渲染引擎从源文档的顶部开始，然后向下运行。

在这种情况下，它会看到您的媒体查询。然后它会看到您的其余代码，这些代码优先，因为它稍后出现。

例如，假设您的样式表是这样的：

div { color: red; }

div { color: blue; }

div { color: red; }

您的文本颜色将为红色。

在这种情况下：

div { color: red; }

div { color: blue; }

您的文本颜色将为蓝色。

在这两种情况下，CSS 选择样式表中的最后一个声明。

如果您希望媒体查询优先，请将其放在代码的末尾。

（看似简单，其实往往如此。一定要了解CSS specificity。）

为什么媒体查询只有在我的 CSS 中放在最后时才有效？

Why does media query only work when placed last in my CSS?

html

css

media-queries