Почему не применяются стили css

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

Итак, я ожидал бы цитату («расставание-такая сладкая печаль!») курсивом и другим шрифтом, чем имя цитируемого (Bill Rattleandrollspeer), поскольку его тег span имеет класс «fancify», прикрепленный к нему. Класс, безусловно, следует рассматривать, так как файл, в котором он появляется, ссылается на файл макета, который использует сайт.стиль CSS файл.

какую ошибку новичка я делаю сейчас?

обновление

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

. но я переместил его выше, и он все еще не работает и не виден через элемент F12 | Inspect для рассматриваемой метки.

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

обновление 2

вот как HTML идет вниз:

. и вот мое правило CSS на сайте.css:

. но его не узнают. Я считаю это казенной частью протокола css / html и должен быть рассмотрен каким-то мировым органом. С другой стороны, я могу совершить какую-нибудь глупую ошибку.

11 ответов

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

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

вы бы стиль это так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему не работают CSS-стили?

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

Навигация по статье:

Речь сегодня пойдет о таких ситуациях, когда вы задаете свои css-стили для определенных элементов на вашем сайте, сохраняете все изменения, обновляете страницу и видите, что данные css-стили не применяются. Сегодня мы постараемся разобраться, в чем может быть причина такой проблемы, и как с ней бороться.

Кэширование браузера

Первая причина, по которой внесенные вами изменения могут не применяться может заключаться в банальном кэшировании браузера. Особенно актуально эта проблема проявляется в браузерах Google Chrome.

Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.

Кэш браузера здесь очищается следующим образом:

1. 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
2. 2. Находим пункт «История» =>«История»

Во всех других браузерах кэш чистится аналогичным образом.

Кэширование на хостинге или на сайте

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

Ошибки в коде

Следующая ситуация, когда стили могут не срабатывать – это ошибки в коде. Особенно это актуально в тех случаях, если вы вносите изменения через встроенный редактор WordPress. Здесь нет подсветки кода и какую-то ошибку в написании того или иного css-свойства очень легко не заметить.

Поэтому для работы с кодом в целом и с css-файлами я рекомендую использовать редакторы кода, в которых есть подсветка этого самого кода. И если вдруг вы какое-то css-свойство напишете не правильно, то у вас он просто не будет подсвечиваться соответствующим цветом, и вы сможете понять, что здесь есть какая-то ошибка.

Не правильно выбранный селектор

Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.

Как же всё таки определить правильно ли вы указали селектор или нет?

Я в таких случаях использую один очень простой прием, который называется задание красной рамки.

К примеру, я хочу изменить стили для блока на сайте.

1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.

Не применяются css

Правки стилей сайта производятся очень часто. Бывает, что нужно немного изменить цвет, положение, размеры или оформление определенного элемента сайта. Сначала инспектором веб браузера необходимо проверить правильность написания самих css правил:

Надпись inspector-stylesheet говорит о том, что данное правило добавлено не в css файлах, а вручную через инспектор. Если через инспектор необходимые изменения внешнего вида корректируемого элемента были достигнуты, то далее необходимо эти изменения внести в файл стилей сайта.

Если неизвестно из какого файла берутся стили сайта, то это можно посмотреть в исходном коде страницы (в большинстве браузеров вызывается через ctrl+u):

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

Далее необходимо внести изменения в css файл, обычно новые стили с соответствующими комментариями добавляются последними строками в файл.

Но иногда изменения стилей не применяются, это может происходить по нескольким причинам:

Изменения на самом деле применились,но результата не видно из-за не обновленного кеша веб браузера. Всегда после изменения стилей необходимо делать очистку кеша через ctrl+F5.

У меня на мобильном телефона в веб браузере chrome часто бывает такой глюк: даже после очистки кеша сайт отображается неправильно. Берешь телефон друга, открываешь на нем сайт — там изменения применены. А на твоем телефоне, даже после очистки истории — нет.Вообще для проверки изменения в стилях удобно использовать режим инкогнито, в нем браузер не сохраняет кешированные версии сайта у себя в памяти, а все время делает загрузку с веб сервера.

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