stylus 层级

Question

<template lang="html">
  <div class="seller-contianer">
    <div class="BScroll-warpper">
      <div class="seller-all">
        <div class="seller-top">
          <h1 class="title">{{seller.name}}</h1>
          <star :size="36" :score="seller.score"></star>
          <div class="priceAbout">
            <div class="pleft">
              <p class="title">起送价</p>
              <p class="price">{{seller.minPrice}}</p>
            </div>
            <div class="pright">
              <p class="title">配送价</p>
              <p class="price">{{seller.deliveryPrice}}</p>
            </div>
          </div>
        </div>
        <div class="space">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import star from '../star/star.vue';
export default {
  components: {
    star
  },
  props: {
    seller: {
      type: Object
    }
  }
};
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/mixin.styl"
  .seller-contianer
    position absolute
    top 174px
    bottom 0
    left 0
    width 100%
    .BScroll-warpper
      width 100%
      overflow hidden
      .seller-all
        margin-top: 18px
        .seller-top
          margin: 0 36px
          border-1px(rgba(7, 17, 27, 0.1))
          .title
            font-size: 14px
            line-height: 14px
            font-weight: 600;
            color: rgb(7,17,27)
</style>

stylus
不是按层级来使用么
.title 应该只是应该只是对.seller-top下的<h1 class="title">{{seller.name}}</h1>有用吗
如果对另两个<p class="title">配送价</p><p class="title">起送价</p> 起作用不应该在来两个空格吗

    .seller-top
      margin: 0 36px
      border-1px(rgba(7, 17, 27, 0.1))
      ...
          .title
            font-size: 14px
            line-height: 14px
            font-weight: 600;
            color: rgb(7,17,27)

Answer 1

跟css的规则差不多的，只要是.seller-top下的.title 都会有效的