Применение класса CSS к тексту

Question

На моей домашней странице http://www.rosstheexplorer.com/ текст «Новый Южный Уэльс», «Виктория», «Северная территория», «Южная Австралия», «Квинсленд», «Путешествие по Австралии», «Как ориентироваться», «Другое Блоги Австралии должны быть выделены жирным шрифтом и в центре. Вот как это было давно, сегодня я заметил, что это уже не так. Я думал, что сделал ошибку на странице, но потом понял, что проблема началась на всем сайте.

Следующий код используется для работы.

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

ПРИМЕЧАНИЕ: Вам может потребоваться щелкнуть по синему тексту, чтобы увидеть скриншот.

The text 'New South Wales' is still associated with the CSS class 'BlackIcon' but now it is not inheriting the properties from the CSS class.

/*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 { 
 
\t color: Black; 
 
\t background-color: White; 
 
\t border-radius: 20px; 
 
\t margin-top: 15px; 
 
\t margin-bottom: 5px; 
 
\t padding: 10px; 
 
\t font-size: 2em; 
 
\t text-align: center; 
 
\t display: inline-block; 
 
\t border: 0 solid black; 
 
\t width: 100%; 
 
\t font-weight: 500; 
 
} 
 
}