vue小細節(4)
阿新 • • 發佈:2018-11-10
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清除浮動
加上程式碼(清除浮動後)後:
- .clear{ clear:both}
- <div class="clear"></div>