последний ребенок и последний из типа, не работающий в SASS

как бы вы написали это, чтобы быть совместимым Сасс?

.fader { display: inline-block; }
.fader img:last-child {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}​

в основном я просто повторяю этот пример выцветания в одном изображении над другим (найден здесь.)

его пример JFiddle:http://jsfiddle.net/Xm2Be/3/

однако его пример-прямой CSS, я работаю над проектом в SASS и не уверен, как правильно его перевести.

мой Код

Примечание В моем примере ниже, img hover работает неправильно (оба изображения отображаются и не происходит никакого действия fadeIn опрокидывания)

Мой CodePen: http://codepen.io/leongaban/pen/xnjso

пробовал

.try-me img:last-child & .tryme img:last-of-type

но: бросает ошибки компиляции SASS, код ниже работает

.try-me img last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

однако он выплевывает CSS, который мне не помогает:

.container .home-content .try-me img last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

обновление: работа Сайт CodePen:

http://codepen.io/leongaban/pen/xnjso

12
css css-selectors sass

3 ответов

вложенность не является требованием с Sass. Не чувствуйте себя обязанным делать это, если нет необходимости разбивать селекторы.

.try-me img:last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

Если вы применяете стили к изображению, а затем определенные стили к последнему типу, то это то, как это будет выглядеть, когда вы вложите его:

.try-me img {
    // styles

    &:last-of-type {
        position: absolute;
        top: 0; 
        left: 0;
        display: none;
    }
}
26

ни то, ни другое не сработало для меня, поэтому.

last-of-type только играет хорошо с элементами, вы можете выбрать вещи с классами все, что вам нравится, но это обрабатывается элементами. Итак, скажем, у вас есть следующее дерево:

<div class="top-level">
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="somethingelse"></div>
</div>

чтобы добраться до последнего div с классом middle, не работает, используя last-of-type.

мое решение было просто изменить тип элемента somethingelse был

надеюсь, это поможет кому-то, потребовалось некоторое время, чтобы понять это.

4

Эй, почему вы не используете только CSS? Вы можете удалить все JS, я имею в виду, что наведение-это поддержка обратно в ie6. Я догадался,что вы знаете, что на планшетах нет события hover..

Я имею в виду, что вам нужно будет установить область для изображения.. Но я нахожу его полным, особенно если вы хотите href.

http://codepen.io/Ne-Ne/pen/xlbck

просто мои мысли..

0