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