CSS sass：第一个孩子不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5855985/
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
sass :first-child not working
提问by ApPeL
I have not been using SASS for a very long time and wanted to know if there are some issues with pseudo-elements such as :first-childor :last-child?
我已经很长时间没有使用 SASS 了，想知道伪元素是否存在一些问题，例如:first-child或:last-child?
回答by nomadkbro
While @Andre is correct that there are issues with pseudo elements and their support, especially in older (IE) browsers, that support is improving all the time.
虽然@Andre 认为伪元素及其支持存在问题是正确的，尤其是在较旧的 (IE) 浏览器中，但这种支持一直在改进。
As for your question of, are there any issues, I'd say I've not really seen any, although the syntax for the pseudo-element can be a bit tricky, especially when first sussing it out. So:
至于您的问题，是否有任何问题，我会说我还没有真正看到任何问题，尽管伪元素的语法可能有点棘手，尤其是在第一次使用它时。所以：
div#top-level
declarations: ...
div.inside
declarations: ...
&:first-child
declarations: ...
which compiles as one would expect:
正如人们所期望的那样编译：
div#top-level{
declarations... }
div#top-level div.inside {
declarations... }
div#top-level div.inside:first-child {
declarations... }
I haven't seen any documentation on any of this, save for the statement that "sass can do everything that css can do." As always, with Haml and SASS the indentation is everything.
我还没有看到任何关于这方面的文档，除了“sass 可以做 css 可以做的一切”的声明。与往常一样，对于 Haml 和 SASS，缩进就是一切。
回答by IGRACH
I think that it is better (for my expirience) to use: :first-of-type, :nth-of-type(), :last-of-type. It can be done whit a little changing of rules, but I was able to do much more than whit *-of-type, than *-childselectors.
我认为最好（对我来说）使用：:first-of-type, :nth-of-type(), :last-of-type。它可以通过稍微改变规则来完成，但我能够做的不仅仅是 whit *-of-type，而不是*-child选择器。
回答by Andrei Sfat
First of all, there are still browsers out there that don't support those pseudo-elements (ie. :first-child, :last-child), so you have to 'deal' with this issue.
首先，仍然有一些浏览器不支持这些伪元素（即:first-child、:last-child），所以你必须“处理”这个问题。
There is a good example how to make that work without using pseudo-elements:
有一个很好的示例如何在不使用伪元素的情况下使其工作：
-- see the divider pipe example.
-- 参见分隔管示例。
I hope that was useful.
我希望那是有用的。
