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

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

4 голосов
/ 12 апреля 2011

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

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

  2. Конкретный файл подкачки (page5.css). Мой page.css содержит main.css (URL-адрес @import (main.css));)

Мой main.css имеет эту часть, которая устанавливает высоту страницы 

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

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

Как мне поступить?

Ответы [ 4 ]

16 голосов
/ 12 апреля 2011

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

<body class="page5">

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

.page5 #content {
  height: XXXpx;
}

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

2 голосов
/ 12 апреля 2011

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

#content { height: 456px }

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

1 голос
/ 12 апреля 2011

В page5.css просто измените высоту.

page5.css 

#content {
    height:400px;
}
0 голосов
/ 11 февраля 2019

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

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

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

Это работает для меня.

...