Блог

Главная - Вопросы по программированию - Как я могу применить изменения стиля CSS только для одной страницы?

Как я могу применить изменения стиля CSS только для одной страницы?

#css #css-selectors #css-sprites

#css #css-селекторы #css-спрайты

Вопрос:

У меня есть два файла css:

  1. Основной файл (main.css)

  2. Определенный файл подкачки (page5.css). Моя страница.css содержит main.css (@import url(main.css));)

В моем main.css это одна из его частей, которая задает высоту страницы

 #content {
    background:url(../images/image.png) no-repeat;
    width:154px;
    height:356px;
    clear:both;
}

Это отлично работает для всех остальных страниц, но на странице 5 мне нужно немного больше высоты.

Как бы я это сделал?

Комментарии:

1. Просто перепишите это на странице 5.

Ответ №1:

Вам даже необязательно создавать отдельный файл CSS. Вы можете добавлять классы в свой текст для различных целей, определяя страницу или тип страницы, являющийся одним из них. Итак, если у вас были:

 <body class="page5">

Тогда в вашем CSS вы могли бы применить:

 .page5 #content {
  height: XXXpx;
}

И это будет применяться к этой странице только до тех пор, пока это происходит после вашего основного #content определения.

Комментарии:

1. Черт возьми, просто добавьте <style> тег.

2. 1 Это то, что я тоже делаю, за исключением того, что имена моих классов body довольно грубые, например USERS USERS-CREATE . Я использую caps, чтобы пометить ее как класс body, и использую ее довольно редко, мне просто нравится, как она выделяется в моих таблицах стилей (например, TODO), потому что я думаю, что в этом нет особой необходимости в целом. Например, page5 I need a little bit more height попахивает плохим дизайном — но, полагаю, у него есть свое применение.

3. В конечном итоге вы должны добавить, что этот css может быть добавлен на страницу с <style type="text/css">...</style>

Ответ №2:

Просто переопределите его где-нибудь после вашей @import директивы:

 #content { height: 456px }

для идентичных селекторов CSS последнее правило перезаписывает первое.

Ответ №3:

В page5.css просто переопределите высоту.

страница 5.css

 #content {
    height:400px;
}

Ответ №4:

Другие ответы не помогли мне на более сложной странице.

Предположим, вы хотите что-то другое на странице X.

  1. На вашей странице X создайте класс с тегом body (body class=»myclass»).
  2. Откройте инструменты разработчика (я использую Chrome) и выберите элемент, который нужно изменить. Допустим, это ссылка ( a.class — ‘class’ — это имя вашего класса привязки, поэтому измените его соответствующим образом). Браузер предоставит нечто довольно общее, что работает в инструменте разработчика, но приводит к сбоям в реальной жизни.
  3. Проверьте родительский элемент измененного поля.
  4. Добавьте HTML-тег в свой инструмент разработчика в качестве тестирования
  5. если ваш новый CSS-путь не становится серым, значит, все в порядке. Если он становится серым, выбранный вами путь все еще нуждается в исправлении.
    Предположим, что родительским элементом является div с классом ‘parent’. Добавьте этот путь «div.parent >» к уже выбранному Chrome a.class Символ > означает, что вы поднимаетесь по дереву.
  6. Вы можете продолжать переходить к DOM в обратном направлении вплоть до body.myclass, или вам может не понадобиться. Нет необходимости добавлять классы для родительских элементов, но вы можете добавить их, если на ваших страницах есть большое сходство.

У меня это работает.

Ответ №5:

Вы можете сделать это, используя ‘id’.

HTML

 <a id="contact" href = "mailto: sarahwallpaperssw@gmail.com">Contact us.</a>

CSS

 #contact{
   text-decoration: none !important;
   font-size: x-large;
}