Почему мой стиль CSS не применяется?

Ответ 1

Вы пытались заставить селекторов быть впереди класса?

p span label.fancify {

    font-size: 1.5em;
    font-weight: 800;
    font-family: Consolas, "Segoe UI", Calibri, sans-serif;
    font-style: italic;
}

Обычно это добавит вес вашему объявлению CSS. Моя ошибка... Между селектором и классом не должно быть места. То же самое касается удостоверения личности. Если у вас есть, например:

<div id="first">
    <p id="myParagraph">Hello <span class="bolder">World</span></p>
</div>

Вы бы сделали это так:

div#first p#myParagraph {
     color : #ff0000;
}

Просто чтобы сделать полный пример с использованием класса:

div#first p#myParagraph span.bolder{
    font-weight:900;
}

Для получения дополнительной информации о псевдо-селекторах и дочерних селекторах: http://www.w3.org/TR/CSS2/selector.html

CSS - это целая наука :) Помните, что некоторые браузеры могут иметь несовместимости и не будут показывать вам надлежащие результаты. Для получения дополнительной информации посетите этот сайт: http://www.caniuse.com/

Ответ 2

В файле CSS может возникнуть ошибка, из-за которой ваш (правильный) CSS не работает.

Ответ 3

Я выходил из головы, когда правило игнорировалось, а другие - нет. Запустите свой CSS через валидатор и найдите ошибки синтаксического анализа.

Я случайно использовал//для комментария вместо /* */, вызывающего нечетное поведение. Моя IDE ничего не сказала об этом. Надеюсь, это поможет кому-то.

Ответ 4

Отправка, так как это может быть полезно для кого-то в будущем:

Для меня, когда я попал сюда, решением стал кеш браузера. Пришлось жестко обновить Chrome (cmd/ctrl + shift + R), чтобы применить новые стили, кажется, что старые кэшировались действительно "глубоко".

Этот вопрос/ответ может пригодиться кому-то. И жесткие советы по обновлению для разных браузеров для тех, кто не использует Chrome.

Ответ 5

Возможно, ваш диапазон наследует стиль, который заставляет его текст быть нормальным, а не курсивом, как вам бы хотелось. Если вы просто не можете заставить его работать так, как вы этого хотите, вы можете пометить свой стиль шрифта как важный.

.fancify {
    font-size: 1.5em;
    font-weight: 800;
    font-family: Consolas, "Segoe UI", Calibri, sans-serif;
    font-style: italic !important;
}

Однако старайтесь не злоупотреблять важными, потому что легко попасть в CSS-ад с ним.

Ответ 6

Я знаю, что это старый пост, но я подумал, что могу добавить мысль для людей, которые сталкиваются с подобной проблемой. Я предполагаю, что вы используете ASP.NET MVC, так как вы упомянули site.css.

Проверьте файл Bundles.config, чтобы узнать, есть ли у вас BundleTable.EnableOptimizations = true; Если вы этого не сделаете, то это может быть вашей проблемой, поскольку это позволяет программе быть связанными и "минимизированными". В зависимости от того, работаете ли вы в режиме отладки или нет, это может иметь эффект.

Ответ 7

Для меня проблема была неправильным типом содержимого обслуживаемого файла .css(если в него были включены некоторые символы Unicode).

Изменение типа содержимого на text/css решило проблему.

Ответ 8

В дополнение к решениям, опубликованным выше, проделав ту же самую проблему, убедитесь, что вы проверяете свой HTML. Более конкретно, правильно ли вы обозначили свои элементы, а также селектора классов и идентификаторов. Вы можете сделать это либо вручную, либо через валидатор (https://validator.w3.org/).

Для меня я пропустил знак равенства рядом с классом (<div class someDiv> vs <div class = "someDiv" > , поэтому почему не было применено свойство CSS.

Ответ 9

В моем случае я вложил класс в свой файл SASS не в то место...

Ответ 10

У меня была аналогичная проблема, которая была вызвана простой ошибкой в ​​комментариях CSS.

Я написал комментарий, используя метод JavaScript//вместо/* */, который заставил следующий CSS-класс сломаться, но все остальные CSS работают как ожидалось.

Ответ 11

Рассуждение о том, что мои стили CSS не применяются, хотя они были загружены:

Атрибут media тега link, который загружал таблицу стилей, имел неправильное значение. Я случайно поставил его 1 вместо all. Это означало, что браузер игнорировал эти стили в этой связанной таблице стилей.

Брокен:

<link rel="stylesheet" type="text/css" href="css/style.css" media="1" />

Исправлено:

<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

Ответ 12

Для меня это были локальные переопределения в Sources → Overrides. Файл сохраняется локально при каждом изменении стиля страницы, и Chrome использует этот файл для переопределения css сервера.

Ответ 13

Очистите кеш и файлы cookie и перезапустите браузер. Поскольку стиль браузера не должен часто меняться, его нужно хранить.

Ответ 14

Я тоже сталкивался с этой проблемой. И это, как это было решено!

Мое имя файла css было gt.css. Я работал над Visual Studio (например, 2017).

• Я пошел в обозреватель решений (нажмите Ctrl + Alt + L) и искал gt.css (введите имя файла css). Щелкните правой кнопкой мыши на имени файла css, затем выберите Bundler and Minifier (4-й вариант), а затем перегруппируйте файл (или нажмите Shift + Alt + F).
• Сохраните любой несохраненный файл, затем очистите кэш и перезагрузите браузер.

Вы можете узнать больше о Bundler и Minifier здесь.

Ответ 15

В моем случае это произошло потому, что я вносил изменения в другой файл с тем же именем и пытался увидеть другой результат