爲什麼媒體查詢只在最後放入CSS時才起作用？

我正在學習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的最後一段到媒體屏幕大小屬於哪個部分（好的代碼重用而不是再次聲明它）？

如果我這樣做，那麼沒有圖標顯示（這是下面的代碼）。

任何人都可以解釋嗎？檢查plunker，此按預期工作：https://plnkr.co/edit/MJAPdkgUegpUlJnkcQHg?p=preview

來源

2016-05-12 Dodi

與級聯樣式表。

級聯就像一個瀑布：渲染引擎從源文檔的頂部開始並向下工作。

在這種情況下，它會看到您的媒體查詢。然後它會看到其餘的代碼，因爲它稍後會優先考慮。

舉例來說，假設你的樣式有這樣的：

div { color: red; } 

div { color: blue; } 

div { color: red; }

您的文字顏色爲紅色。

在這種情況下：

div { color: red; } 

div { color: blue; }

您的文字顏色爲藍色。

在這兩種情況下，CSS都會選擇樣式表中的最後一個聲明。

如果您希望媒體查詢優先，請將其放在代碼的末尾。

（這似乎簡單，往往是隻要確保瞭解CSS specificity）

來源

2016-05-12 14:32:18

感謝解釋這 – Dodi

這是關於位置，把媒體查詢後：的前因爲你的工作將是確定

.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>

來源

2016-05-12 14:26:04

爲什麼媒體查詢只在最後放入CSS時才起作用？

回答

相關問題