标签选择器与类选择器中间是否应该有空格？他们之间的区别有哪些

标签选择器和类选择器是CSS中最常用的组合选择器类型，很多时候标签选择器与类选择器之间存在空格，有些时候两者之间又不存在空格，是否存在空格有什么区别呢？

以下面代码为例：

<p class="red">
    1 <a href="http://blog.csdn.net/weimob258616" target="_blank">弹幕猴子</a>
    2<a href="http://blog.csdn.net/weimob258616" target="_blank">弹幕猴子</a>
</p>
<p>
    3<a class="red" href="http://blog.csdn.net/weimob258616" target="_blank">弹幕猴子</a>
    4<a href="http://blog.csdn.net/weimob258616" target="_blank">弹幕猴子</a>
</p>

当使用标签选择器和类选择器没有空格时：

p.red {color:red;}

 

显示结果： class为red的P标签颜色变红。

当使用标签选择器和类选择器之间存在空格时：

p .red {color:red;}

显示结果：P标签下的class类元素颜色标红。

结论：标签选择器与class选择没有空格时，需要同时满足两个选择器的条件，表示选择类名称为classname的该标签元素。案例中p.red即既要是p标签，又要属于class="red"的标签，即p标签中属于class="red"的标签；标签选择器与class选择有空格时，表示选择该标签后代中类名称为classname的所有元素。