1、相邻兄弟选择器之常用场景

 <div class="list">
    <div class="list__item" v-for="item of 3" :key="item">
      {{ item }}
    </div>
 </div>

.list {
  width: 200px;
  margin: auto;
  border: 1px solid rgb(26, 82, 4);

  &__item + &__item {
    border-top: 1px solid rgb(26, 82, 4);
  }
}

效果图：

2、纯CSS绘制三角形

  <div class="triangle">
    <div class="common triangle__left"></div>
    <div class="common triangle__right"></div>
    <div class="common triangle__top"></div>
    <div class="common triangle__bottom"></div>
    <div class="common triangle__left-top"></div>
    <div class="common triangle__left-bottom"></div>
    <div class="common triangle__right-top"></div>
    <div class="common triangle__right-bottom"></div>
  </div>

.common {
  border: 50px solid transparent;
  width: 0;
  height: 0;
}

.triangle {
  display: flex;

  &__left {
    border-right-color: #f8b595;
  }
  &__right {
    border-left-color: #f8b595;
  }
  &__top {
    border-bottom-color: #f8b595;
  }
  &__bottom {
    border-top-color: #f8b595;
  }
  &__left-top {
    border-left-color: #f8b595;
    border-top-color: #f8b595;
  }
  &__left-bottom {
    border-left-color: #f8b595;
    border-bottom-color: #f8b595;
  }
  &__right-top {
    border-right-color: #f8b595;
    border-top-color: #f8b595;
  }
  &__right-bottom {
    border-right-color: #f8b595;
    border-bottom-color: #f8b595;
  }
}

效果图：

3、单行和多行文本超出省略号

  <div class="container">
    <div class="single">
      <span class="title">&nbsp;单行溢出：</span>1.Vue
      实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM
      的更新。 2.
      Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
    </div>
    <div class="mutiple">
      <span class="title">多行溢出：</span>1.Vue
      实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行
      DOM的更新。 2.
      Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
    </div>
  </div>

.container {
  width: 400px;
  height: 200px;
  margin: 100px;
  padding: 16px;
  font-size: 20px;
  color: #333;
  line-height: 30px;
}

.title {
  color: #f8b595;
}

/*单行*/
.single {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  margin-bottom: 30px;
}

/*多行*/
.mutiple {
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 3; 
  line-clamp: 3;
  word-break: break-all;
  overflow: hidden;
  max-width: 100%;
}

效果图：