最后一个孩子和最后一个类型在SASS中不起作用

西门2020-03-24

您如何编写符合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;
}

更新：工作代码笔：

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

斯丁前端2020/03/24 11:05:21

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

我的意思是您将需要为图像设置一个区域。但是我发现它使用了全部，特别是如果您想要href的话。

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

只是我的想法

卡卡西2020/03/24 11:05:21

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

凯西里2020/03/24 11:05:21

以上都不对我有用，所以。

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是

希望它可以帮助某人，花了我一段时间来解决。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer