last-child 和 last-of-type 不在 SASS 中工作答案

【问题标题】：last-child and last-of-type not working in SASSlast-child 和 last-of-type 不在 SASS 中工作
【发布时间】：2013-05-30 02:16:59
【问题描述】：

您将如何编写此代码以符合 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;
}

更新：工作 Codepen：

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

【问题讨论】：

标签： css sass css-selectors

【解决方案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;
    }
}

【讨论】：

谢谢！那行得通：D是的，那是我的问题，尝试嵌套所有内容，应该退后一步并意识到我正在尝试嵌套2个不同的选择器。工作 Codepen：codepen.io/leongaban/pen/xnjso

【解决方案2】：

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

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

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

只是我的想法..

【讨论】：

【解决方案3】：

以上都不适合我，所以。

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 的元素类型

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

【讨论】：