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

问题描述 投票:15回答:3

你怎么写这个SASS兼容?

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

基本上我只是复制这个在一个图像中淡化另一个(found here.)的例子

他的JSFiddle例子:qazxsw poi

然而他的例子是直接的CSS,我正在SASS的一个项目上工作,我不确定如何正确翻译它。

我的守则

请注意,在我下面的示例中,img悬停不能正常工作(两个图像都显示出来,并且没有发生翻转淡入淡出动作)

我的CodePen:http://jsfiddle.net/Xm2Be/3/

我试过了

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

但是:抛出SASS编译错误,下面的代码可行

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

然而它吐出了CSS,这对我没有帮助:

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

更新:工作Codepen:

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

css sass css-selectors
3个回答
30
投票

Sass不需要嵌套。如果不需要拆分选择器,就不觉得有义务这样做。

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

如果您将样式应用于图像,然后将特定样式应用于最后一个类型,那么这就是嵌套它时的样子:

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

6
投票

上述两者都不适合我,所以。

.try-me img { // styles &:last-of-type { position: absolute; top: 0; left: 0; display: none; } } 只对元素很好玩,你可以选择所有你喜欢的类,但这可以通过元素来处理。所以说你有以下树:

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

希望它可以帮助某人,让我花一点时间来解决这个问题。


0
投票

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

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

somethingelse

只是我的想法..

© www.soinside.com 2019 - 2024. All rights reserved.