css 中两个class之间没有空格与有空格的影响

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39581226/article/details/80408070

使用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 则是在一个元素上，这个元素包括这两个类才会有效果。