Stylus 选择器 #

选择器嵌套 #

选择器嵌套是 Stylus 最强大的特性之一，它让样式结构更加清晰。

基本嵌套 #

stylus

.nav
  ul
    list-style none
    margin 0
    padding 0
    
  li
    display inline-block
    
  a
    text-decoration none
    color #333

编译结果：

css

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li {
  display: inline-block;
}
.nav a {
  text-decoration: none;
  color: #333;
}

嵌套层级 #

stylus

.container
  width 100%
  
  .header
    padding 20px
    
    .logo
      float left
      
      img
        height 40px
        
    .nav
      float right
      
      ul
        list-style none
        
        li
          display inline-block

父选择器引用 (&) #

基本用法 #

& 代表父选择器：

stylus

.button
  display inline-block
  padding 10px 20px
  background-color #3498db
  color #fff
  
  &:hover
    background-color darken(#3498db, 10%)
    
  &:active
    transform scale(0.98)
    
  &:focus
    outline 2px solid #3498db
    outline-offset 2px

编译结果：

css

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
}
.button:hover {
  background-color: #2980b9;
}
.button:active {
  transform: scale(0.98);
}
.button:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

伪类和伪元素 #

stylus

.link
  color #3498db
  
  &:hover
    text-decoration underline
    
  &:visited
    color #9b59b6
    
  &::before
    content "→ "
    margin-right 5px
    
  &::after
    content ""
    display block
    clear both

修饰符类 #

stylus

.button
  padding 10px 20px
  border-radius 4px
  
  &--primary
    background-color #3498db
    color #fff
    
  &--secondary
    background-color #2ecc71
    color #fff
    
  &--danger
    background-color #e74c3c
    color #fff
    
  &--large
    padding 15px 30px
    font-size 18px
    
  &--small
    padding 5px 10px
    font-size 12px
    
  &.disabled
    opacity 0.5
    cursor not-allowed

编译结果：

css

.button {
  padding: 10px 20px;
  border-radius: 4px;
}
.button--primary {
  background-color: #3498db;
  color: #fff;
}
.button--secondary {
  background-color: #2ecc71;
  color: #fff;
}
.button--danger {
  background-color: #e74c3c;
  color: #fff;
}
.button--large {
  padding: 15px 30px;
  font-size: 18px;
}
.button--small {
  padding: 5px 10px;
  font-size: 12px;
}
.button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

反向引用 #

在嵌套选择器前添加父选择器：

stylus

.header
  .container &
    padding 0 20px
    
  .sidebar &
    background-color transparent

编译结果：

css

.container .header {
  padding: 0 20px;
}
.sidebar .header {
  background-color: transparent;
}

部分引用 #

`^[N]` 语法 #

使用 ^[N] 引用第 N 层选择器：

stylus

.form
  &__input
    border 1px solid #ccc
    
  &__button
    background-color #3498db
    
  &--inline
    display flex
    
    & ^[0]__input
      flex 1
      
    & ^[0]__button
      margin-left 10px

编译结果：

css

.form__input {
  border: 1px solid #ccc;
}
.form__button {
  background-color: #3498db;
}
.form--inline {
  display: flex;
}
.form--inline .form__input {
  flex: 1;
}
.form--inline .form__button {
  margin-left: 10px;
}

`^[N..M]` 范围引用 #

引用选择器范围：

stylus

.level1
  .level2
    .level3
      & ^[1..2]
        color red

编译结果：

css

.level1 .level2 .level3 .level2 .level3 {
  color: red;
}

选择器函数 #

`selector()` 函数 #

获取当前选择器：

stylus

.button
  selector()  // 返回 '.button'
  
  &:hover
    selector()  // 返回 '.button:hover'

`selectors()` 函数 #

获取所有父选择器：

stylus

.foo
  .bar
    .baz
      selectors()
      // 返回: ('.foo' '.bar' '.baz')

`selector-exists()` 函数 #

检查选择器是否存在：

stylus

if selector-exists('.button')
  // 选择器存在

if selector-exists('&:hover')
  // 当前选择器有 hover 状态

`selector-nest()` 函数 #

手动嵌套选择器：

stylus

selector-nest('.foo', '.bar')
// 返回: '.foo .bar'

selector-nest('.foo', '&:hover')
// 返回: '.foo:hover'

`selector-append()` 函数 #

追加选择器：

stylus

selector-append('.button', '--primary')
// 返回: '.button--primary'

selector-append('.button', '.disabled')
// 返回: '.button.disabled'

`selector-replace()` 函数 #

替换选择器：

stylus

selector-replace('.a .b .c', '.b', '.d')
// 返回: '.a .d .c'

选择器组合 #

逗号分隔 #

stylus

// 单行
h1, h2, h3, h4, h5, h6
  margin-top 0
  font-weight bold

// 多行
h1
, h2
, h3
  margin-bottom 20px

// 嵌套中组合
.article
  h1, h2, h3
    color #333

后代选择器 #

stylus

.article
  p
    margin-bottom 1em
    
  h2
    margin-top 2em

子选择器 #

stylus

.list
  > li
    border-bottom 1px solid #eee
    
    &:last-child
      border-bottom none

相邻兄弟选择器 #

stylus

h2
  + p
    margin-top 0

通用兄弟选择器 #

stylus

h2
  ~ p
    color #666

属性选择器 #

stylus

// 基本属性选择器
[type="text"]
  border 1px solid #ccc

// 属性存在
[disabled]
  opacity 0.5

// 属性开头
[class^="btn-"]
  display inline-block

// 属性结尾
[class$="-icon"]
  width 20px
  height 20px

// 属性包含
[class*="container"]
  max-width 100%

// 多属性组合
input[type="text"][disabled]
  background-color #f5f5f5

伪类选择器 #

结构伪类 #

stylus

.list
  li
    &:first-child
      border-top none
      
    &:last-child
      border-bottom none
      
    &:nth-child(odd)
      background-color #f9f9f9
      
    &:nth-child(3n+1)
      clear left
      
    &:nth-of-type(1)
      font-weight bold

状态伪类 #

stylus

.form
  input
    &:focus
      border-color #3498db
      
    &:disabled
      background-color #f5f5f5
      
    &:valid
      border-color #2ecc71
      
    &:invalid
      border-color #e74c3c
      
    &:required
      border-width 2px

否定伪类 #

stylus

.button
  &:not(.disabled)
    cursor pointer
    
  &:not([disabled])
    opacity 1

.list
  li
    &:not(:last-child)
      margin-bottom 10px

实用示例 #

BEM 命名模式 #

stylus

.card
  display block
  border 1px solid #ddd
  border-radius 8px
  
  &__header
    padding 15px
    border-bottom 1px solid #ddd
    
  &__body
    padding 15px
    
  &__footer
    padding 15px
    border-top 1px solid #ddd
    
  &--featured
    border-color #3498db
    
    & ^[0]__header
      background-color #3498db
      color #fff
      
  &--compact
    & ^[0]__header
    , & ^[0]__body
    , & ^[0]__footer
      padding 10px

响应式组件 #

stylus

.nav
  &__list
    display none
    
    @media (min-width: 768px)
      display flex
      
  &__toggle
    display block
    
    @media (min-width: 768px)
      display none
      
  &__item
    margin-right 20px
    
    @media (max-width: 767px)
      margin-right 0
      margin-bottom 10px

表单样式 #

stylus

.form-group
  margin-bottom 15px
  
  &__label
    display block
    margin-bottom 5px
    font-weight bold
    
  &__input
    width 100%
    padding 10px
    border 1px solid #ddd
    border-radius 4px
    
    &:focus
      border-color #3498db
      box-shadow 0 0 0 3px rgba(52, 152, 219, 0.1)
      
    &.is-invalid
      border-color #e74c3c
      
    &.is-valid
      border-color #2ecc71
      
  &__error
    color #e74c3c
    font-size 12px
    margin-top 5px
    display none
    
    .is-invalid ~ &
      display block

最佳实践 #

1. 控制嵌套深度 #

stylus

// 不推荐：嵌套太深
.page
  .content
    .article
      .body
        .paragraph
          color #333

// 推荐：最多 3 层
.article-paragraph
  color #333

2. 使用 BEM 或类似命名 #

stylus

// 推荐：清晰的命名
.card
  &__header
    // ...
  &__body
    // ...
  &--featured
    // ...

3. 分组相关样式 #

stylus

// 推荐：按功能分组
.button
  // 基础样式
  display inline-block
  padding 10px 20px
  
  // 变体
  &--primary
    background-color #3498db
    
  &--secondary
    background-color #2ecc71
    
  // 状态
  &:hover
    opacity 0.9
    
  &.disabled
    opacity 0.5

下一步 #

掌握选择器后，继续学习运算符了解 Stylus 中的运算能力！

Stylus 选择器 #

选择器嵌套 #

基本嵌套 #

嵌套层级 #

父选择器引用 (&) #

基本用法 #

伪类和伪元素 #

修饰符类 #

反向引用 #

部分引用 #

^[N] 语法 #

^[N..M] 范围引用 #

选择器函数 #

selector() 函数 #

selectors() 函数 #

selector-exists() 函数 #

selector-nest() 函数 #

selector-append() 函数 #

selector-replace() 函数 #

选择器组合 #

逗号分隔 #

后代选择器 #

子选择器 #

相邻兄弟选择器 #

通用兄弟选择器 #

属性选择器 #

伪类选择器 #

结构伪类 #

状态伪类 #

否定伪类 #

实用示例 #

BEM 命名模式 #

响应式组件 #

表单样式 #

最佳实践 #

1. 控制嵌套深度 #

2. 使用 BEM 或类似命名 #

3. 分组相关样式 #

下一步 #

`^[N]` 语法 #

`^[N..M]` 范围引用 #

`selector()` 函数 #

`selectors()` 函数 #

`selector-exists()` 函数 #

`selector-nest()` 函数 #

`selector-append()` 函数 #

`selector-replace()` 函数 #