CSS-селекторы Orbit

Я использую слайдер Foundation Orbit. Он работает нормально, за исключением того, что мне нужно применить CSS (переместить заголовок) к определенному слайдеру на странице.

Если я использую следующий селектор, он вносит изменения, только проблема в том, что это глобальное изменение.

.orbit-wrapper .orbit-caption
{
    bottom:-30px;
}

Я пробовал разные селекторы с идентификатором контейнера div, но он никогда не применялся.

#promotion .orbit-caption
{
    bottom:-30px;
}

Если я проверю значения css в браузере, правильные значения есть, но они каким-то образом не применяются к элементу. Только когда я меняю селектор, как в первом примере выше, я получаю изменение.

Я не эксперт в css, но селекторы, которые я пробовал, работают в нормальных условиях.

Что я делаю неправильно?


css selector orbit
person madmarten    schedule 11.10.2012    source источник
comment
!важно, твой друг здесь. Хотя бы для устранения неполадок.   -  person Jawad    schedule 11.10.2012
comment
Пробовал !важно, не помогло. Если я смотрю в инструменты браузера, я вижу, что он читает мое значение и переопределяет значение по умолчанию из селектора .orbit-wrapper .orbit-caption, но это не применяется к макету.   -  person madmarten    schedule 11.10.2012

Ответы (3)


arrow_upward
1
arrow_downward

Убедились ли вы, что элемент имеет position: relative;?

.orbit-wrapper .orbit-caption
{
    position: relative;
    bottom:-30px;
}

Без таковой или позиции: абсолютной; свойство «нижний» ничего не сделает.

person castillo.io    schedule 11.10.2012
comment
Он имеет положение: абсолютное. Я пытаюсь переопределить нижнее значение. Если я использую глобальный селектор в вашем коде выше, он работает, но если я попытаюсь переопределить его с помощью селектора идентификатора, браузер увидит значение и сообщит об этом, чтобы переопределить глобальный селектор, но изменение не применяется к элементу. - person madmarten; 11.10.2012
comment
Дело в том, что Orbit добавляет элементы и стили через javascript, поэтому окончательный html не соответствует моему коду, и поэтому мои селекторы не работают, я считаю. Надеялся, что кто-нибудь узнает, что Orbit делает с html-элементами, и это поможет узнать, какие селекторы использовать. - person madmarten; 11.10.2012

arrow_upward
0
arrow_downward

Итак, я узнал, что происходит. Orbit копирует элемент заголовка в элемент за пределами исходного контейнера орбиты (мой div). Я не заметил этого с самого начала, потому что исходные подписи остались там, где я их создал, поэтому я их отлаживал.

Решение состоит в том, чтобы создать еще один элемент-оболочку и использовать его в качестве селектора для подписей. Следующее работает, если я создаю div с id=promotion-wrapper, содержащий div ползунка орбиты.

#promotion-wrapper .orbit-caption
{
    bottom:-30px;
}
person madmarten    schedule 11.10.2012

arrow_upward
0
arrow_downward

Я нашел новое и простое решение,

Просто добавьте margin-top и измените position на относительную.

.orbit-container .orbit-slides-container > * .orbit-caption {
    position: relative;
    bottom: 0;
    margin-top:40px;
    background-color:#F3F3F3;
    color: black;
    width: 100%;
    padding: 10px 14px;
    font-size: 0.875em; }
person volkan pehlivan    schedule 26.08.2013