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

这是关于展示位置，将媒体查询放在：之前的之后，它会没问题

.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中放在最后？

2 个答案: