Почему медиа-запрос работает только тогда, когда последний размещен в моем 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;
}
}*/
Идея заключается в том, что когда размер области просмотра меньше 300 пикселей, значки карт не отображаются, в противном случае они отображаются.
Я играл с кодом, и я не могу понять, почему мы должны определить@media (min-width: 300px) дважды, чтобы код работал как положено.
Почему мы не можем просто поместить код в последнем абзаце CSS в раздел, где указан размер экрана мультимедиа (хорошее повторное использование кода вместо объявления этого снова)?
Если я сделаю это, значки не будут отображаться (это код ниже).
Кто-нибудь может объяснить? Проверьте поршень, это работает как ожидалось:https://plnkr.co/edit/MJAPdkgUegpUlJnkcQHg?p=preview