將CSS類應用於文本

Question

在我的主頁http://www.rosstheexplorer.com/上，輸入文字“新南威爾士州”，“維多利亞”，“北領地”，“南澳大利亞”，“昆士蘭州”，“澳大利亞旅游指南”，“其他澳大利亞博客均應以粗體顯示並居中。 很長一段時間以來都是這樣，今天我注意到情況不再如此。 我以為我在頁面上犯了一個錯誤，但后來意識到問題已經開始在整個網站上發生。

以下代碼用於工作。

<div class="BlackIcon">New South Wales</div>
<div class="BlackIcon">Victoria</div>

注意：您可能需要單擊藍色文本以查看屏幕截圖。

文本“ New South Wales”仍然與CSS類“ BlackIcon”相關聯，但是現在它沒有繼承CSS類的屬性。

/*To be used on its own, it has 100% width so you no longer need a guide css as well*/
@media screen and (max-width: 9999999px) {
    .BlackIcon {
        color: Black;
        background-color: White;
        border-radius: 20px;
        margin-top: 15px;
        margin-bottom: 5px;
        padding: 10px;
        font-size: 2em;
        text-align: center;
        display: inline-block;
        border: 0 solid black;
        width: 100%;
        font-weight: 500;
    }
}

誰能解釋導致此問題的原因？

Answer 1

問題在於您的自定義樣式表存在語法錯誤。

嘗試將整個樣式粘貼到所選的語法檢查器中（例如http://csslint.net ）

注意紅色三角形。 這些是解析錯誤，通常會導致瀏覽器忽略其余樣式。

樣式表中有兩個流浪}字符。 如果只刪除這兩行，應該沒問題。 可以在.BlackIcon規則上方幾行找到它們，這將解釋為什么該規則不起作用。

Answer 2

如果你想這樣

你不能使用

 @media screen and (max-width: 9999999px) {} 

否則您必須使用最小寬度

 @media only screen and ( min-width: 992px) and (max-width:99999999px) { .BlackIcon { color: Black; background-color: White; border-radius: 20px; margin-top: 15px; margin-bottom: 5px; padding: 10px; font-size: 2em; text-align: center; display: inline-block; border: 0 solid black; width: 100%; font-weight: 500; } }