CSS last-child 和 last-of-type 在 SASS 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16905061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
last-child and last-of-type not working in SASS
提问by Leon Gaban
How would you write this to be SASS compliant?
你会如何写这个以符合 SASS 标准？
.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.)
基本上我只是在复制这个在一个图像上淡入淡出的例子（在这里找到）。
His JFiddle example: http://jsfiddle.net/Xm2Be/3/
他的 JFiddle 示例：http: //jsfiddle.net/Xm2Be/3/
However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.
然而，他的例子是直接的 CSS，我正在 SASS 中开展一个项目，但不确定如何正确翻译它。
My Code
我的代码
Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)
请注意，在我下面的示例中，img 悬停无法正常工作（两个图像都显示并且没有发生翻转淡入动作）
My CodePen:http://codepen.io/leongaban/pen/xnjso
我的 CodePen：http ://codepen.io/leongaban/pen/xnjso
I tried
我试过
.try-me img:last-child & .tryme img:last-of-type
But the : throws SASS compile errors, the code below works
但是：抛出 SASS 编译错误，下面的代码有效
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
However it spits out CSS which doesn't help me:
但是它会吐出对我没有帮助的 CSS：
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
UPDATE: Working Codepen:
更新：工作 Codepen：
回答by cimmanon
Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.
嵌套不是 Sass 的要求。如果没有必要拆分选择器，请不要觉得有义务这样做。
.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;
}
}
回答by WebTim
Neither of the above worked for me, so.
以上都不适合我，所以。
last-of-typeonly plays nice with elements, you can select things with classes all you like but this gets handled by the elements. So say you have the following tree:
last-of-type只对元素很好，你可以选择你喜欢的类的东西，但这由元素处理。所以说你有以下树：
<div class="top-level">
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="somethingelse"></div>
</div>
To get to the last div with the class of middle, doesn't work using last-of-type.
要使用 类到达最后一个 div，middle使用last-of-type.
My workaround was to simply change the type of element that somethingelsewas
我的解决方法是简单地改变该元素的类型somethingelse是
Hope it helps someone out, took me a while to figure that out.
希望它可以帮助某人，我花了一段时间才弄清楚。
回答by Neil
Hey why don't you use only CSS? You could remove all the JS, I mean hover is support right back to ie6. I guessed that you know there is no hover event just active on tablets..
嘿，你为什么不只使用 CSS？你可以删除所有的 JS，我的意思是悬停支持回到 ie6。我猜你知道没有悬停事件只是在平板电脑上活动..
I mean you will need to set an area for the image.. But I find it use full, especially if you want an href.
我的意思是你需要为图像设置一个区域..但我发现它使用完整，特别是如果你想要一个href。
http://codepen.io/Ne-Ne/pen/xlbck
http://codepen.io/Ne-Ne/pen/xlbck
Just my thoughts..
只是我的想法..
