html – 为什么媒体查询只能在我的CSS中放在最后？

我正在学习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

解决方法

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

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

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

例如,假设你的样式表有这个：

div { color: red; }

div { color: blue; }

div { color: red; }

您的文字颜色将为红色.

在这种情况下：

div { color: red; }

div { color: blue; }

您的文字颜色为蓝色.

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

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

(看起来很简单,而且经常是这样.只要确保了解CSS specificity.)

html – 为什么媒体查询只能在我的CSS中放在最后？

解决方法

相关文章