I'm learning css and I came across an example that has the following code:
<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>
and 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;
}
}*/
The idea is when the viewport size is below 300px then the card icons are not displayed, otherwise, it shows them.
I was playing around with the code and I can't understand why we have to define @media (min-width: 300px) twice for the code to work as expected.
Why can't we just put the code in the last paragraph of the css to the section where media screen size belongs (good code reuse instead of declaring this again ) ?
If I do this then no icons are displayed (this is the code below).
Could anyone explain ? Check the plunker, this works as expected: https://plnkr.co/edit/MJAPdkgUegpUlJnkcQHg?p=preview
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
