css - last-child 和 last-of-type 在 SASS 中不起作用

Question

您将如何编写它以符合 SASS 标准？

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

基本上，我只是复制了这个例子，即一张图片在另一张图片上淡入淡出 (found here.)

他的 JFiddle 示例:http://jsfiddle.net/Xm2Be/3/

但是他的示例是纯 CSS，我正在 SASS 中处理一个元素，不确定如何正确翻译它。

我的代码

请注意，在我下面的示例中，img 悬停无法正常工作(两个图像都显示并且没有发生翻转淡入操作)

我的 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;
}

---

更新:工作代码笔:

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

Answer 1

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;
    }
}