css 中 not選擇器的用法：

通過not選擇器摺疊面板，element-ui中修改el-menu屬性，要通過.sidebar-el-menu拿到，通過.el-menu--collapse拿到el-menu裡的class

<div class="slidebar" >
     <el-menu class="sidebar-el-menu" :collapse="collapse" background-color="#324157"
              text-color="#bfcbd9" active-text-color="#20a0ff">側邊欄</el-menu>
 </div>

/*************/

.sidebar-el-menu:not(.el-menu--collapse){
  width: 250px;
}

<style>            
          div {
              width: 100px;
              height: 100px;
              overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
              margin: 5px 10px;
              display: inline
 
-block;
              color: white;
              float: left;
          }
          .red {
              background: red;
          }
          .orange {
              background: orange;
          }
          .blue {
              background: blue;
          }
          div.red:not(.orange){
              border: 4px solid deepskyblue;
          }
          div.red.blue{
              clear: both;
          }
          div.red.orange.blue{
              width: 150px;
          }
        
 
</style>
        <div class="red">red</div>
        <div class="orange">orange</div>
        <div class="blue">blue</div>
        <div class="red orange">red + orange</div>
        <div class="red blue">red+blue</div>
        <div class="red orange blue">red+orange+blue</div>
        <div class="blue orange">blue+orange</div>

效果：

解釋：

div.red:not(.orange){
              border: 4px solid deepskyblue;
          }

//有紅，沒有黃色的div加上深藍的邊框線

1）：not（selector）

是指不含selector樣式的其他所有的元素

2）xx標籤.class:not(selector)

是指含class的xx標籤，但不含selector樣式的所有xx元素的   【即（含class和非selector的xx標籤的元素）】

2.clear：both清除浮動

加上程式碼（清除浮動後）後：

1. .clear{ clear:both} 
2. <div class="clear"></div>