css 中兩個class之間沒有空格與有空格的影響
阿新 • • 發佈：2018-11-19
使用vue做專案的時候，遇到class繫結，其中有一個地方，兩個類名之間不允許用空格隔開，否則就會失去相應的渲染效果。
<div id="app" class="box"> <ul class="tabs clearfix"> <li v-for="(tab,index) in tabsName"> <a href="#" class="tab-link" @click="tabSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a> </li> </ul> <div class="cards"> <div class="tab-card" style="display: block;">這是HTML教程ngfdgh</div> <div class="tab-card">歡迎來到CSS模組</div> <div class="tab-card">嗨，這裡是vue</div> <div class="tab-card">歡迎來到CSS模組</div> <div class="tab-card">嗨，這裡是vue</div> <div class="tab-card">歡迎來到CSS模組</div> </div> </div>
.box { width: 100%; height: 100%; /*margin: 0 auto; border: 1px solid #000;*/ } .tabs { float: left; width: 12.555555555555555vw; list-style: none; } .tabs li { width: 10.555555555555555vw; min-width: 10vmin; margin: 0.111111111111111vw 1.1111111111111111vw; float: left; list-style: none; } .tabs .tab-link { border-radius: 5px; display: block; text-align: center; line-height: 35px; background-color: #5597B4; color: #fff; text-decoration: none; } .tabs .tab-link.active { line-height: 45px; border-bottom: 5px solid #E35885; transition: .3s; } .cards { padding: 1.111111111111111vw; /*border: 2px #00ACEE solid;*/ float: left; } .cards .tab-card { display: none; } .clearfix:after { content: ""; display: block; height: 0; clear: both; }
上圖所示的程式碼中，使用v-bind，綁定了active這樣的類，注意css檔案裡面，.tab-link.active中間是沒有空格的，如果添加了空格，將不會呈現.active的樣式
.tabs .tab-link.active {
line-height: 45px;
border-bottom: 5px solid #E35885;
transition: .3s;
}.tabs .tab-link .active是後代選擇器。.tabs .tab-link.active則是在一個元素上，這個元素包括這兩個類才會有效果。