萨斯:第一个孩子不工作

Question

我已经很长时间没有使用SASS了,想知道是否存在伪元素的问题,比如:first-child或:last-child？

Answer 1

虽然@Andre是正确的,但是伪元素及其支持存在问题,特别是在旧的(IE)浏览器中,这种支持一直在改进.

至于你的问题,是否有任何问题,我会说我还没有看到任何问题,虽然伪元素的语法可能有点棘手,特别是在第一次出来时.所以:

div#top-level
  declarations: ...
  div.inside
    declarations: ...
    &:first-child
      declarations: ...

按照预期编译:

div#top-level{
  declarations... }
div#top-level div.inside {
  declarations... }
div#top-level div.inside:first-child {
  declarations... }

我没有看到任何关于这方面的任何文档,除了"sass可以完成css可以做的所有事情"的声明.和往常一样,对于Haml和SASS来说,缩进就是一切.

Answer 2

我觉得这是更好的(我的expirience)使用方法::first-of-type,:nth-of-type(),:last-of-type.它可以通过稍微改变规则来完成,但我能够*-of-type比*-child选择器做更多的事情.

Answer 3

这就是我通常编写伪元素的方式:first-child，:last-child并且:nth-child(n)在sass中

.my-class {
    &:first-child {
       // your css code             
    }

    &:last-child {
       // your css code             
    }

    &:nth-child(2) {
       // your css code             
    }
}