1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

1.1.2 Как сменить последовательность классов в стиле?

Тема в разделе "Вопросы по стилям, изменения в CSS и шаблонах", создана пользователем StWaN, 28 апр 2012.

Загрузка
  1. StWaN

    StWaN Местный

    Регистрация:
    12.08.11
    Сообщения:
    64
    Симпатии:
    30
    Версия XF:
    1.4.10
    Редактируя и настраивая стандартный стиль появился вопрос:

    При изменении цвета background'a класса @secondaryContent (Второстепенное содержимое) он изменяется не только в секциях sidebar'а, но еще и во многих местах. Перекрывая при этом класс @blockLinksList (Меню: контейнер ссылок) - для него задан свой цвет.

    Структура такая:
    HTML:
    <ol class="secondaryContent blockLinksList">
    Пробовал менять классы местами редактируя шаблон:
    HTML:
    <ol class="blockLinksList secondaryContent">
    но ничего не меняется.

    Помогает только удаление этого класса, в итоге код приобретает такой вид:
    HTML:
    <ol class="blockLinksList">
    Хочу чтобы класс secondaryContent остался, а для контейнера ссылок отображался свой цвет через класс blockLinksList (был выше что ли, или secondaryContent как нибудь скрывать в этом месте, когда задан цвет для blockLinksList), без редактирования шаблона. Как это реализовать?
     
  2. infis

    infis Местный Команда форума

    Регистрация:
    27.06.11
    Сообщения:
    5.525
    Симпатии:
    3.320
    Версия XF:
    1.5.9
    Порядок указания классов никак не влияет на последовательность их применения. Применение идет, исходя из очередности описания в CSS. Т.е., если какой-то класс для элемента указан в CSS раньше, то будет применяться он, перекрывая все остальные нижеследующие определения. Чтобы применить какие-то настройки, которые располагаются ниже, требуется добавить !important после значения свойства. Это помогает не всегда (может быть несколько таких описаний, например, что влечет за собой применение первого !important).
    Без правки шаблонов обойтись в таком случае довольно сложно, а то и невозможно. Как вариант, можно использовать EXTRA.CSS, в котором описать нужные настройки для id элемента, а не его класса. Дело в том, что применение CSS для id приоритетнее применения CSS для class. Но, как можете заметить, далеко не всегда указан id элемента. Тогда нужно в шаблоне добавить его, а в EXTRA.CSS добавить блок для этого id. В любом случае обратите внимание, что EXTRA.CSS подключается позже, чем основные CSS. Поэтому перекрытие в EXTRA.CSS делается часто как раз с применением !important. Либо там же описывается блок для id, который либо уже есть, либо приходится указывать его в шаблоне.
    Ну и всегда работающий вариант - это прямо в шаблоне описать style для элемента. Тогда все, что описано внешними CSS идет лесом, а применяются в первую очередь те свойства, которые указаны в style элемента.

    Как видим, большинство таких телодвижений приводят к необходимости правки шаблона...

    Я не специалист в этом. Может быть есть и другие варианты.
     
    StWaN нравится это.
  3. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Немного дополню то что сказано выше. Про очерёдность сказано почти точно. Используется всегда последний указаный селектор, но если какой-то селектор содержит больше уточнений то использован будет именно он.
    К примеру, если задать:
    .myClass .element {color: red;}
    .element {color: green;}

    То использовано будет первое значение, так как оно более точное.
    !important использовать не советую, лучше навешивать к селекторам html, body. Если конечно какое-то свойство использовать совсем недопустимо то да, обязательно надо указать !important.
     
    StWaN нравится это.
  4. maus

    maus Местный

    Регистрация:
    27.03.12
    Сообщения:
    187
    Симпатии:
    128
    Раз уж заговорили об этом, рекомендую ознакомиться со статьей на Хабре. Разом снимает большинство вопросов о приоритетах CSS-правил.
     
    StWaN и Romchik® нравится это.
  5. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Вообще-то ответ тут довольно простой (это если я конечно вопрос точно понял :)):
    Код:
    .secondaryContent.blockLinksList {
      background:#f30;
    }
    Таким образом, все блоки, содержащие одновременно оба класса, будут с красным фоном. И никаких шаблонов править не нужно.
     
    StWaN нравится это.

Поделиться этой страницей