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

【问题标题】：Why does media query only work when placed last in my CSS?为什么媒体查询仅在我的 CSS 中最后放置时才有效？
【发布时间】：2016-09-08 10:59:22
【问题描述】：

我正在学习 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;
    }
}*/

这个想法是当视口大小低于 300 像素时，卡片图标不会显示，否则会显示它们。

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

为什么不能直接把css最后一段的代码放到media screen size所属的部分（代码复用好，不要再声明了）？

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

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

【问题讨论】：

标签： html css media-queries

【解决方案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>

【讨论】：

【解决方案2】：

因为您使用的是层叠样式表。

级联就像瀑布：渲染引擎从源文档的顶部开始向下工作。

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

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

div { color: red; }

div { color: blue; }

div { color: red; }

您的文本颜色将为红色。

在这种情况下：

div { color: red; }

div { color: blue; }

您的文本颜色将为蓝色。

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

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

（看起来很简单，而且经常如此。请务必了解CSS specificity。）

【讨论】：