Just that I don’t know and I don’t know. Stylus Chinese website

  1. Run the following command in the CSS folder:
stylus -w selector.styl -o selector.css
Copy the code

1. ^[N] selector

^[N] N is a number, where 0 represents the first level and the last level is &

.foo
    &__bar
        &_baz
            width 10px
            ^[1]:hover &
                width 20px
            ^[2]:hover &
                width 20px
Copy the code

Generate CSS files

.foo__bar_baz {
  width: 10px;
}
.foo__bar:hover .foo__bar_baz {
  width: 20px;
}
.foo__bar_baz:hover .foo__bar_baz {
  width: 20px;
}
Copy the code

2. ^[N..M] Select elements from N to M

Look at the following code

.foo
    & .bar
        width 100px
        ^[0]:hover ^[1..-1]
          width 200px
Copy the code

Into the CSS

.foo .bar {
  width: 100px;
}
.foo:hover .bar {
  width: 200px;
}

Copy the code

3. ~/ (Initial Reference) = = ^[0]

Look at the code

.block
    &__example
        ~/:hover &
            color red
Copy the code

Into the CSS

.block:hover .block__example {
  color: #f00;
}
Copy the code

4… / (Relative Reference) Relative selector

.foo
    .bar
      width 100px
      &,
      ../ .baz
          height 10px
Copy the code

Into the CSS

.foo .bar {
  width: 100px;
}
.foo .bar..foo .baz {
  height: 10px;
}
Copy the code

5. / (Root Reference)

textarea
input
  color #A7A7A7
  &:hover,
  /.is-hovered
    color # 000
Copy the code

Into the CSS

textarea.input {
  color: #a7a7a7;
}
textarea:hover.input:hover..is-hovered {
  color: # 000;
}
Copy the code

6. Selector () bif stylus built-in function to get the current selector

Look at the code

.foo
  selector()
// => '.foo'

.foo
  &:hover
    selector()
// '.foo:hover'

.foo
  selector('.bar')
// => '.bar'

.foo
  selector('&:hover')
// '.foo:hover'
Copy the code