最后一个孩子和最后一个类型不在SASS工作

Question

你怎么写这个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悬停不能正常工作(两个图像都显示出来,并且没有发生翻转淡入淡出动作)

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

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

Answer 2

上述两者都不适合我,所以.

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是

希望它可以帮助某人,让我花一点时间来解决这个问题.