Подтвердить что ты не робот

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

У меня есть этот html:

<p>
    <span class="fancify">Parting is such sweet sorrow!</span><span> - Bill Rattleandrollspeer</span>
</p>

... и этот css (добавлен в конец сайта Site.css):

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

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

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

UPDATE

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

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {

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

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

ОБНОВЛЕНИЕ 2

Вот как сходит HTML:

<p>
    <span>
        <label class="fancify">Parting is such sweet sorrow!</label>

... и вот мое правило css в Site.css:

p span label .fancify {
        font-size: 1.5em;
        font-weight: 800;
        font-family: Consolas, "Segoe UI", Calibri, sans-serif;
        font-style: italic;
        display: inline;
    }

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

4b9b3361

Ответ 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

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