Css не работает class для p

Что делать, если не работает CSS-класс?

Я пишу css-правило

но на странице ничего не меняется: цвет остаётся серым.

1 ответ 1

Браузеры предоставляют отличные инструменты для отладки css. Не надо ждать, пока кто-то угадает, в чём проблема. Надо просто взять и посмотреть, что же происходит. Покажу на примере Хрома.

Сначала надо обновить страницу со сбросом кэша.
В большинстве браузеров это Ctrl + F5 .

Если не помогло, то по исследуем по следующему плану:

Щёлкнуть проблемный элемент правой кнопкой и выбрать пункт Исследовать элемент :

Появится панель отладки, на которой на вкладке Elements выделен кликнутый элемент. Если нужен другой, можно перейти к нему. Затем следует обратить внимание на вкладки Styles и Computed :

Если в element.style есть интересующее свойство, то

• если в html-разметке прописан стиль в атрибуте style , удаляем оттуда лишнее
• если нет, кончаем читать этот ответ и переходим к отладке скриптов, которые этот стиль выставляют (либо перебиваем !important ом, что делать крайне не рекомендуется)

На вкладке Styles надо найти свой селектор.
Если его там нет, то проблема в опечатке или подключении css-файла.

Как видим, свойство зачёркнуто, но восклицательного знака (говорящего о неверном значении) нет. Это означает, что есть другое правило, имеющее больший приоритет. В простых случаях достаточно посмотреть на вышестоящие правила и понять, что там надо. В более запутанных стоит заглянуть на вкладку Computed и посмотреть, какие вообще значения влияют:

Здесь видно, что селектор .so-header .navigation .-link перебивает наше правило.
Кликом по стрелочке можно перейти к самому правилу, но нам это сейчас не нужно.

Теперь мы знаем, что приоритет используемого правила 0 id, 3 класса, 0 тегов .
Если мы уверены, что наше правило идёт после переопределяемого, то нам достаточно той же силы. Если нет, то надо побольше.

Самый простой способ — это сделать так:

Но руководствуясь здравым смыслом, стоит всё-таки сделать так:

Если всё равно не работает.

На шаге 6 стоило заглянуть в переопределяющий стиль — возможно, в нём есть !important :

В таком случаем нам тоже придётся его использовать:

Если проблемы возникают только при печати, надо включить эмуляцию @media print . Для этого надо нажать в девтулах Ctrl + Sift + P и в появившемся окне написать media:

после чего выбрать строчку Emulate CSS print media.

Источник

Селектор классов CSS не работает

Я новичок в программировании, и у меня проблемы с новичком .

Всякий раз, когда я создаю стили для своих элементов внутри своего HTML-файла (style = «. «), все работает нормально, но когда я делаю это правильно, то есть я даю им класс и стилизую их в файле CSS, это не сработает. вообще.

А это мой CSS, где я стараюсь дать им отступ в 6 пикселей по всему периметру:

Вы можете помочь мне найти проблему? Большое спасибо!

Изменить: Да, мой файл HTML и CSS связаны в разделе заголовка (это работающий веб-сайт), поэтому проблема должна быть в другом месте .

4 ответа

Как ответ на ваше собственное решение: скорее всего, у вас был другой фрагмент CSS, который перезаписывал ваш .miniflag CSS.

Тем не менее, я не понимаю, почему я не могу просто поместить его в .miniclass, поскольку я думал, что определенный атрибут класса всегда превосходит атрибут общего класса.

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

• .miniflag : атрибут универсального класса, самый низкий уровень
• .highlight p .miniflag : более конкретный атрибут класса с 3 уровнями

Будет применен более конкретный вариант.

Кроме того, положение ваших правил CSS также имеет значение:

Это установит цвет на blue , так как последнее правило применяется и перезаписывает предыдущее правило.

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

Источник

Полный список причин, по которым css файл может не работать

Эта проблема заставляет меня чувствовать себя абсолютным noob.

Вот глава моего .html файла:

И мой файл html.css действительно там, где он должен быть. Но у меня совсем нет стиля. Помогите!

И, пожалуйста, не голосуйте, потому что ответ очевиден, и я не вижу его.

РЕДАКТИРОВАТЬ 1

Хорошо, теперь я просто пытаюсь решить проблему локально на своей машине. Вот глава:

РЕДАКТИРОВАТЬ 2

Хорошо, я добился определенного прогресса. Предложение firebug было действительно хорошим. Я видел, что ссылка на файл CSS читается как китайские символы. Это была проблема кодирования UTF, поэтому я просто открыл свои файлы в текстовом редакторе, а затем сохранил их как UTF-16.

Но теперь он считывает неверные данные из файла css! Я загрузил файл css ниже, но в firebug он показывает два лайнера.

Я нахожу это озадачивающим!

ОТВЕТЫ

Ответ 1

Вы уверены, что таблица стилей загружена? Вы можете увидеть его, используя вкладку «Сеть» Firebug на firefox или на вкладке «Сеть» консоли консоли вашего браузера.

(Если 1 работает), у вас может быть простой стиль образца и посмотреть, будет ли он применяться (и видимым в консоли)?

Ответ 2

Если это не работает, убедитесь, что URL-адрес доступен, а контент — то, что вы ищете.

Ответ 3

Может быть, у вас есть ошибка в вашем файле CSS? Скобка закрыта, отсутствующая точка с запятой и т.д.

Ответ 4

Firefox может отклонить таблицу стилей, если она не подана с типом контента «text/css». (Это отдельно от объявления ‘type=»text/css»‘ в HTML.)

Ответ 5

У меня была такая же проблема — я изменил текстовую кодировку на UTF-16 в моем индексном файле, и мой файл css будет отображаться пустым, когда я попытаюсь загрузить страницу в браузере. Я понял много проб и ошибок, что ваши html и css файлы должны иметь одинаковую кодировку! Я не знаю, будет ли это работать для вас, но это было для меня.

Ответ 6

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

Ответ 7

I таблица стилей может не загружаться по нескольким причинам. Но основной подход к решению такой проблемы заключается в следующем:

1. После загрузки страницы нажмите F12 , чтобы открыть Консоль разработчиков. Проверьте консоль на наличие зарегистрированных ошибок.

2. Затем вы должны проверить вкладку «Таблицы стилей» и просмотреть список таблиц стилей, загруженных браузером.

3. URL-адрес, который вы используете в своем теге HTML link , может быть недоступным, поэтому вручную попробуйте посетить таблицу стилей с помощью браузера и посмотреть, все ли отображается правильно.

4. Любая опечатка внутри вашей таблицы стилей HTML или CSS может привести к загрузке таблицы стилей.

5. Проверяйте наличие ошибок фатальной ошибки перед тегом
. Неустранимая ошибка может остановить исполняемый код и приостановить страницу, не включая таблицу стилей.

Надеюсь, что это поможет.

Ответ 8

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

Но почему бы не попробовать удалить его до одного правила CSS — поместите его в раздел HEAD, а затем, если он будет работать, переместите это правило во внешний файл. Затем повторите введение других правил, чтобы убедиться, что ничего не пропало или не имеет приоритета над вашим CSS.

Ответ 9

У меня была такая проблема! Я смог исправить это после

Шаг 1 → из сообщения Abraar Arique, я зашел в консоль → Зашел в Редактор стилей и нашел, что Firefox не загружает обновленную копию моего файла css.

Я очистил всю историю и перезагрузил страницу, тогда моя проблема была исправлена.

Ответ 10

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

Селектор #navi нигде не содержится в HTML, потому что я забыл добавить его перед написанием CSS. в моем случае я работал с файлом Less, поэтому я вложил его в это

Я надеюсь, что эта помощь поможет пересмотреть, когда что-то не работает.

Ответ 11

Новый для вас Ребята!

Во время моего процесса Gulp minification

Последний файл CSS был для печати, и сгенерированный вывод дал мне

Итак, из-за media = «print» все правила CSS были пропущены!

Ответ 12

Моя простая мысль, что вы пропустили type=»text/css» .

Ответ 13

URL http://fakedomain.com/smilemachine/html.css в тэге
неверен. Файл не найден.

Ответ 14

Если ваш URL-адрес работает и загружает файл правильно, и вы сказали, что добавление правильного

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

Что вы можете сделать, это написать один базовый тег

Ответ 15

У меня была такая же проблема, китайские символы появлялись в firefox при загрузке на веб-сервер, но не на localhost. Я скопировал содержимое файла css в новый текстовый файл. Теперь все работает. Должна быть некоторая ошибка в кодировке Unicode/encoding.

Ответ 16

У меня была такая же проблема с тем, что css не работал, позже я узнал, что это мои строки @media в css, которые вызывают проблему.

Я переместил их в конец css, и все было разрешено.

Ответ 17

У меня есть еще один. Я назвал свой файл css: default.css. Он не загрузится. Когда я попытался просмотреть его в браузере, он показал пустую страницу.

Я изменил имя на default_css.css и начал работать.

Ответ 18

У меня была та же проблема, и я использовал кодировку UTF-8 для обоих моих файлов следующим образом:

добавить @charset «UTF-8»; в файле CSS и в в файле HTML. и это сработало для меня.

он делает одинаковую кодировку для обоих файлов, т.е. HTML и CSS.

Вы также можете сделать то же самое для кодировки «UTF-16».

Если он все еще не работает, проверьте наличие
в в файле HTML, где следует указать type=»text/css»

Ответ 19

Я использую WordPress, и таблица стилей была поставлена в очередь в нижний колонтитул

Это привело к добавлению атрибута media=»1″ к тегу
, в результате чего таблица стилей была загружена, но не применена.

Изменил параметр на false и теперь он работает

Источник

Селектор классов CSS не работает

Я новичок в программировании, и у меня проблемы с новичком .

Всякий раз, когда я создаю стили для своих элементов внутри своего HTML-файла (style = «. «), все работает нормально, но когда я делаю это правильно, то есть я даю им класс и стилизую их в файле CSS, это не сработает. вообще.

А это мой CSS, где я стараюсь дать им отступ в 6 пикселей по всему периметру:

Вы можете помочь мне найти проблему? Большое спасибо!

Изменить: Да, мой файл HTML и CSS связаны в разделе заголовка (это работающий веб-сайт), поэтому проблема должна быть в другом месте .

4 ответа

Как ответ на ваше собственное решение: скорее всего, у вас был другой фрагмент CSS, который перезаписывал ваш .miniflag CSS.

Тем не менее, я не понимаю, почему я не могу просто поместить его в .miniclass, поскольку я думал, что определенный атрибут класса всегда превосходит атрибут общего класса.

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

• .miniflag : атрибут универсального класса, самый низкий уровень
• .highlight p .miniflag : более конкретный атрибут класса с 3 уровнями

Будет применен более конкретный вариант.

Кроме того, положение ваших правил CSS также имеет значение:

Это установит цвет на blue , так как последнее правило применяется и перезаписывает предыдущее правило.

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

Источник

jQuery .css не работает для p и p.class

У меня есть функция jQuery, которая изменяет размер шрифта и высоту строки для многих элементов страницы, включая p и p.latest_news. Функция работает, как и ожидалось, со всеми остальными элементами, кроме p.latest_news

Размер шрифта и высота строки, применяемые к p.latest_news, равны классу p no (т. е. $(‘p’).css(<. )

если я только использую

p.article_news размер шрифта и высота строки изменяются, как и ожидалось

Почему это происходит? Как я могу повлиять на каждый p, класс и бесклассовый?

4 ответа

У меня есть несколько

s, для которых я использую css :hover , чтобы изменить BG-цвет при наведении курсора:

На моей странице html есть два типа

for some Paragraph in header

а другие просто

Containing some text

Я хочу color для единственного p (должно быть немного #xxxxx ), а для p.header это должен быть цвет по умолчанию. Вот мой.

Вы устанавливаете размер шрифта article_news, а затем снова меняете его с помощью второго селектора.

Что вам нужно, так это:

селектор :not() в основном выбирает все P-узлы, которые не имеют класса .active_news.

Просто переверните свои функции. Использовать функцию с P-селектор, за которым следует функция с p.article_news селектора.

Ваша функция селектора p переопределяет функцию селектора p.article_news.

Мне нравится решение Марка.

Но если обе функции вызываются вместе, вы можете скорее перевернуть их и заставить работать.

Может быть, это быстрее, чем проверка с помощью :not

Я должен увеличить размер первой буквы каждого элемента P , который не является или . Это прекрасно работает: p::first-letter < font-size: 300%; >Но когда я пытаюсь соответствовать требованиям и делаю это, это не работает.

Я добавляю ошибку класса для тега p, и css для этого класса .error < border: 1px solid #ff0000 !important; >Он отлично работает во всех других браузерах. Этот класс ошибок добавляется к элементу с Jquery. Класс добавляется в IE11, но css не появляется. Я вижу класс и его css в инструменте.

Вы перезаписываете стили, добавленные в p.article_news , когда вы стилизуете p , потому что все p.article_news являются p . Вы можете сначала ввести p , а затем p.article_news , или вы можете использовать p:not(.article_news) вместо p .

Похожие вопросы:

Может ли кто-нибудь объяснить разницу между, .class p <..>Против, p.class <. >Являются ли они оба эквивалентными способами заставить CSS применяться к тегу класса .class и P? Или есть какая-то.

Стили p.bull CSS не применяются. Все остальное есть, но не стиль p.bull . Мой CSS h1.heading < text-align: center; >h1.sideheading < color : blue; text-decoration: underline; p.bull < color : blue;.

Я новичок в javascript и jQuery, поэтому, пожалуйста, потерпите меня. Я использовал следующий код в jQuery, чтобы изменить фон div. Но это не работает :- $(document).ready(function()<.

У меня есть несколько

s, для которых я использую css :hover , чтобы изменить BG-цвет при наведении курсора:

На моей странице html есть два типа

for some Paragraph in header

а другие просто

Containing some text

Я хочу color для.

Я должен увеличить размер первой буквы каждого элемента P , который не является или . Это прекрасно работает: p::first-letter < font-size: 300%; >Но когда я пытаюсь.

Я добавляю ошибку класса для тега p, и css для этого класса .error < border: 1px solid #ff0000 !important; >Он отлично работает во всех других браузерах. Этот класс ошибок добавляется к элементу с.

Я пытаюсь раскрасить текст в #fav красный цвет, используя jQuery, но это не работает. HTML

Я использую jQuery, чтобы проверить, существует ли конкретное свойство и значение CSS. Почему это не работает? Я ожидаю увидеть журнал ‘yes’. $(document).ready(function() < if ($('p').css('color').

Источник