stylus预处理器中的选择器selector Partial Reference

最新推荐文章于 2025-05-29 14:12:45 发布

不是本人11

最新推荐文章于 2025-05-29 14:12:45 发布

阅读量345

点赞数

分类专栏： stylus 文章标签： Partial Reference stylus selector

本文链接：https://blog.youkuaiyun.com/bozhouyongqi/article/details/96902075

版权

本文详细介绍了Stylus预处理器中的Partial Reference特性，包括^[N]的使用，它允许单独访问嵌套选择器的层级。讲解了^[0]到^[N]如何获取不同层级的选择器，以及负数索引的情况，如^[-1]表示获取父级选择器。此外，还阐述了^[N…M]如何表示选择器范围，以及~/（Initial Reference）和/（根选择符）的概念。文章最后讨论了selector()和selectors()内置函数的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装stylus

yarn add stylus

可以通过执行npx stylus style.styl可以将styl文件转换成同名css文件
npx stylus -w style.styl 添加-w参数可以实时编译

Partial Reference

可以使用^[N]来代替部分选择选择器。

Partial reference works similar to the parent reference, but while parent reference contains the whole selector, partial selectors contain only the first merged N levels of the nested selectors, so you could access those nesting levels individually.

局部引用跟父级引用相似，但是父级引用包含了整个选择器，局部引用只包含最初的匹配上的N层嵌套的选择器，因此可以获取到逐层的选择器。

The ^[0] would give you the selector from the first level, the ^[1] would give you the rendered selector from the second level and so on:

^[0]可以获取到第一层选择器，^[1]可以获取到第二层选择器。
例如：

.foo
  &__bar
    width: 10px

    ^[0]:hover &
      width: 20px

would be re

最低0.47元/天解锁文章