25

您将如何编写它以符合 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

4

3 回答 3

42

嵌套不是 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;
    }
}
于 2013-06-03T20:23:49.700 回答
7

以上都不适合我，所以。

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我的解决方法是简单地更改元素的类型

希望它可以帮助某人，我花了一段时间才弄清楚。

于 2016-09-08T16:23:32.737 回答
0

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

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

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

只是我的想法..

于 2013-06-25T00:41:06.470 回答