css - sass：第一个孩子不工作

Question

我已经很长时间没有使用 SASS，想知道伪元素是否存在一些问题，例如:first-childor :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

我认为最好（根据我的经验）使用：:first-of-type, :nth-of-type(), :last-of-type. 它可以通过稍微改变规则来完成，但我能做的不仅仅是 whit *-of-type，而不是*-child选择器。

Answer 3

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

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

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

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

Answer 4

首先，仍然有一些浏览器不支持这些伪元素（即：first-child、:last-child），所以你必须“处理”这个问题。

有一个很好的例子如何在不使用伪元素的情况下使其工作：

http://www.darowski.com/tracesofinspiration/2010/01/11/this-newbies-first-impressions-of-haml-and-sass/

       -- 参见分隔管示例。

我希望这很有用。