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 hover无法正常工作（两个图像都显示出来，并且没有发生翻转淡入淡出动作）

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

要使用middle类到达最后一个div，使用last-of-type无效。

我的解决方法是简单地更改somethingelse

的元素类型

希望它可以帮助别人，让我花一点时间来弄明白。

Answer 3

嘿，你为什么不只使用CSS？你可以删除所有的JS，我的意思是悬停是支持回到ie6。我猜你知道平板电脑上没有悬浮事件。

我的意思是你需要为图像设置一个区域..但我发现它使用完全，特别是如果你想要一个href。

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

只是我的想法..

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

我的代码

更新：工作Codepen：

3 个答案: