最后一个孩子和最后一个类型在SASS中不工作 [英] last-child and last-of-type not working in SASS

问题描述

您会如何编写此文件以符合SAS​​S标准？

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

基本上我只是复制这个例子 （在此处找到。）

Basically I'm just replicating this example of fading in one image over another (found here.)

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

His JFiddle example: http://jsfiddle.net/Xm2Be/3/

然而，他的例子是直接的CSS，我正在SASS上的一个项目，不知道如何正确地翻译它。

However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.

请注意，在下面的示例中，img hover无法正常工作（两个图像都显示， fadein action发生）

Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)

我的代码页：
http://codepen.io/leongaban/pen/xnjso

我试过

.try-me img:last-child & .tryme img:last-of-type

但是：throws SASS编译错误，

But the : throws SASS compile errors, the code below works

.try-me img last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

但是它吐出的CSS不能帮助我：

However it spits out CSS which doesn't help me:

.container .home-content .try-me img last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

---

UPDATE：Working Codepen：

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

推荐答案

Sass不需要嵌套。如果没有必要拆分选择器，不要感到有义务这样做。

Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.

.try-me img:last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

如果您要对图像应用样式，

If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:

.try-me img {
    // styles

    &:last-of-type {
        position: absolute;
        top: 0; 
        left: 0;
        display: none;
    }
}

这篇关于最后一个孩子和最后一个类型在SASS中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！