CSS 标签、类名和ID选择器有空格和没有空格的区别

前言

标签选择器、类名选择器以及 ID 选择器在使用上要注意“加空格”和“不加空格”。两种使用形式上有很大的差别。

下面是讲解案例的 HTML 代码：

<div class="demo">
	<div class="a">Node1</div>
	<div class="b ef">
		<div class="b1">Node2-1</div>
		<div class="b2">Node2-2</div>
	</div>
	<div class="c ef">Node3</div>
</div>

加空格

加空格代表选择当前节点的后代节点（包括直接节点，区别于子代选择器）。

div .ef {
	font-size: 20px;
	color: #00B7FF;
}

不加空格

一个元素（标签）的类名有一个或多个，把多个类名加起来就不能加空格。

div.b.ef {
	font-size: 20px;
	color: #00B7FF;
}