css中空格和“.”的区别

我们在定义css的时候,一定有很多的层级关系

 

<div class="a">
 abcdef
 <div class="b">
  abcdef 
 </div>
</div>

我们定义了a里有个b,并且对a和b进行了css样式的定义如下

div.a{
text-decoration:underline;
color:#66FF33;
}
div.a div.b{
color:#FF3300;}

结果如图所示:

如果将其改为

div.a{
text-decoration:underline;
color:#66FF33;
}
div.a,div.b{
color:#FF3300;}

在div.a和div.b之间多了个,号那么我们就可以出现下面的样式所示,

表明a和b都出现了一中样式而并非是层级的关系.

说明了在定义的时候我们的a只对作用了在div里的所有a,div.a div.b只作用了b,这就说明了空格间代表着层级的关系,而div.a,div.b则表现了a和b都具有的样式.