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*='&']