Sass 和组合子选择器

Sass and combined child selector(Sass 和组合子选择器)
本文介绍了Sass 和组合子选择器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我刚刚发现了 Sass,对此我感到非常兴奋.

I've just discovered Sass, and I've been so excited about it.

在我的网站中,我实现了一个树状导航菜单,使用 子组合子 (E > F).

In my website I implement a tree-like navigation menu, styled using the child combinator (E > F).

有没有办法在 Sass 中用更简单(或更好)的语法重写这段代码?

Is there any way to rewrite this code with a simpler (or better) syntax in Sass?

#foo > ul > li > ul > li > a {
  color: red;
}

推荐答案

如果没有组合子选择器,您可能会做类似这样的事情:

Without the combined child selector you would probably do something similar to this:

foo {
  bar {
    baz {
      color: red;
    }
  }
}

如果你想用 > 重现相同的语法,你可以这样做:

If you want to reproduce the same syntax with >, you could to this:

foo {
  > bar {
    > baz {
      color: red;
    }
  }
}

编译成这样:

foo > bar > baz {
  color: red;
}

<小时>

或者在 sass 中:


Or in sass:

foo
  > bar
    > baz
      color: red

这篇关于Sass 和组合子选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

:hover:before text-decoration none has no effects?(:hover:before text-decoration none 没有效果?)
Is CSS faster when you are specific?(当您特定时,CSS 会更快吗?)
CSS sibling selectors (select all siblings)(CSS 兄弟选择器(选择所有兄弟))
IE: nth-child() using odd/even isn#39;t working(IE:使用奇数/偶数的 nth-child() 不起作用)
How can I tell if an element is in a shadow DOM?(如何判断一个元素是否在影子 DOM 中?)
Can I use CSS to add a bullet point to any element?(我可以使用 CSS 为任何元素添加项目符号吗?)