Stylus 选择器 - 菜鸟教程

缩进

Stylus 语法是 “python 式” 的（即，基于缩进）。空格很重要，所以我们使用_缩进_和_突出_来代替 { 和 }，如下所示：

body
  color white

编译成css的结果：

body {
  color: #fff;
}

如果喜欢，可以使用冒号来分隔属性和值：

body
  color: white

规则集

和 CSS 一样，Stylus 允许通过逗号分隔，一次为多个选择器定义属性。

textarea, input
  border 1px solid #eee

也可以通过换行书写来实现：

textarea
input
  border 1px solid #eee

最终都会编译为：

textarea,
input {
  border: 1px solid #eee;
}

该规则的唯一例外是外观类似于属性的选择器。例如，以下 foo bar baz 可能是属性或选择器：

foo bar baz
> input
  border 1px solid

由于上述原因（或者只是喜欢如此），我们可在末尾添加一个逗号：

foo bar baz,
form input,
> a
  border 1px solid

父级引用

& 符号代表父级选择器。下面的例子中，（textarea和input）两个选择器的伪类 :hover 都会改变 color 属性。

textarea
input
  color #A7A7A7
  &:hover
    color #000

编译为：

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

下面的例子中，在混入(mixin)中使用父级引用为 IE 浏览器中的元素加了一个简单的 2px 的边框。

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments
  html.ie8 &,
  html.ie7 &,
  html.ie6 &
    border 2px solid arguments[length(arguments) - 1]

body
  #login
    box-shadow 1px 1px 3px #eee

编译为：

body #login {
  -webkit-box-shadow: 1px 1px 3px #eee;
  -moz-box-shadow: 1px 1px 3px #eee;
  box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
  border: 2px solid #eee;
}

如果需要在选择器中单纯地使用&符，不使用其父级引用的功能，可以通过转义符\来转义：

.foo[title*='\&']
  // => .foo[title*='&']