#css #css-selectors #pseudo-class #image-replacement
#css #css-селекторы #псевдокласс #замена изображения
Вопрос:
Это звучит как абстрактный вопрос, но я пытаюсь устранить неполадки в этом проекте, над которым я работаю, и я в растерянности.
Мне пришлось взять на себя управление проектом, потому что первый разработчик был уволен, поэтому я совершил ошибку новичка, не начав его с первого дня. Я исправил сотни ошибок и практически все переделал. Все, начиная от несемантического кода, встроенных элементов макета, излишне нарезанных текстовых изображений и необходимости конвертировать все из CSS2 в CSS3.
Я говорю все это, потому что здесь слишком много кода, который нужно включить, и я надеюсь, что, возможно, мое описание моей ситуации поможет вспомнить чей-то неудачный опыт, чтобы дать мне совет.
ПРОБЛЕМА: у меня есть одна страница, на которой ничего не работает. Я удалил соответствующий CSS из внешней таблицы стилей и переписал его во внутренней таблице стилей. Две самые большие проблемы, с которыми я сталкиваюсь, заключаются в том, что псевдоэлементы и псевдоклассы не работают. Некоторое время я боролся, пытаясь выяснить, было ли это тем, что я использую, но затем я экспериментировал с различными псевдоклассами, такими как p:first-child {color: red} и ничего.
У меня также возникли проблемы с заменой изображения на странице. Мой обычный текстовый отступ не работает, текст просто остается на странице.
Я не уверен, какая другая информация была бы уместна, поэтому, если вам нужно что-то увидеть или задать какие-либо вопросы, пожалуйста, спрашивайте. Заранее благодарю вас за то, что спасли такого новичка, как я, от выдергивания волос 🙂
Редактировать
Вот ссылка с кодом страницы: http://jsfiddle.net/syren/Zsj2T Все остальное на сайте работает, поэтому я должен предположить, что это как-то связано с кодом на странице.
Комментарии:
1. Ссылка на страницу проблемы была бы отличной для отслеживания проблем.
2. Это, наверное, очевидно… Но вы точно определили, что отличается на этой странице? Какие ресурсы вызываются на этой странице по сравнению с любыми другими? Здесь должен быть какой-то внешний файл, который мешает.
3. Я не могу опубликовать ссылку, но я попытаюсь опубликовать что-нибудь. По большей части, однако, нет ресурсов, которые я использовал здесь, которые я не использовал где-либо еще, и ничего, что отличало бы эту страницу от других.
4. «необходимость конвертировать все из CSS2 в CSS3» Подождите, что?!
5. Начните с средства проверки HTML . Возможно, вы упускаете из виду небольшую проблему в исходном коде.
Ответ №1:
Я вижу, что вы используете #history p:first-child .
Вы, вероятно, ожидаете, что этот селектор выберет первый <p> элемент #history , но это неправильно. :first-child Селектор выбирает только те элементы, которые являются первыми дочерними.
Чтобы выбрать первый <p> элемент, вы должны использовать #history p:first-of-type .
Структура вашего кода в виде дерева:
div#history
h2 :first-child
a.share :nth-child(2)
p :nth-child(3) p:first-of-type
Скрипка: http://jsfiddle.net/Zsj2T/1 /
PS. Краткая справка MDN: Псевдоклассы
Комментарии:
1. Ооооооо, это имеет смысл. Совершенно забыл о first-of-type. Спасибо!
2. Есть идеи по поводу замены изображения по ссылке «назад»?
3. Извините, забыл изменить путь к изображению. Теперь это есть.
4. Я бы снова поставил 1 за ту маленькую структуру DOM, которая у вас есть.
Ответ №2:
прочитайте эту статью и проверьте совместимость с браузерами каждого псевдоэлемента.
СОВЕТ: не используйте название цвета ( RED ), вместо этого используйте шестнадцатеричное значение цвета ( #F00 ), поскольку название цвета устарело в соответствии с w3c
Комментарии:
1. 1)
:first-childявляется псевдоклассом, а не псевдоэлементом. Здесь нет упоминания о псевдо-элементах. 2) «название цвета устарело в соответствии с w3c» С каких пор?2. Это HTML, а не CSS. Вам вообще не следует указывать цвет в HTML, но в CSS совершенно нормально использовать либо имена, либо шестнадцатеричные коды.
3. проблема не в совместимости с браузером, потому что те же псевдоклассы работают на других страницах.