当前位置：文江博客话题详情

sass：第一个孩子不工作

发布于 2024-11-04 17:18:42 字数 96 浏览 5 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

狼性发作 2024-11-11 17:18:42

虽然 @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，缩进就是一切。

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.

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.

回复收藏 0 原文

下雨或天晴 2024-11-11 17:18:42

我认为（根据我的经验）最好使用： :first-of-type, :nth-of-type(), :last-类型。只需稍微改变一下规则就可以完成，但我能做的不仅仅是 *-of-type 和 *-child 选择器。

回复收藏 0 原文

抚你发端 2024-11-11 17:18:42

这就是我通常在 中编写伪元素 :first-child、:last-child 和 :nth-child(n) 的方式>萨斯

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

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

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

This is how I usually write pseudo-elements :first-child, :last-child and :nth-child(n) in sass

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

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

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

回复收藏 0 原文