[你必须知道的css系列]第一回：丰富的利器终结篇：选择符的组合关系及选择符总结

介绍了这么多选择符，其实选择符的使用最大的优势不是单枪匹马奋斗，而应该是针对不同的页面结构组合成各种方阵。其主要方式体现在针对性使用类选择符或者

ID选择符、选择符群组及选择符组合这3种方式。

一、针对性使用类选择符或者 ID选择符主要作用于类选择符或者 ID选择符，尤其是类选择符在一个页面中可能 会在多处不同的标签中定义 同名的类，那么就需要针对性地使用类选择符。

　　例如，页面中所有标签元素的类名都为.test,需要将段落元素P的样式定义为红色字体，大小18px且带下划线样式。

　　

<style type="text/css">
.test
{
    font-size:12px;
}
p.test
{
    font-size:18px;
    color:red;
    text-decoration:underline;
}
</style>
<p class="test">p标签内文字，类名为test</p>
<div class="test">div里面的文字，类也为test</div>
<p>p标签，没有类</p>

可以猜到效果：类名为test的所有标签字体都是12px;而针对类名为test的P标签的样式为红色、大小18px、有下划线。不带class的标记则为浏览器的默认解析。

效果：

 

 二、ID选择符的使用方式与类选择符的使用方式相同，即:

　　p#test{color:red} 

三、选择符群组，顾名思义就是将多个相同定义的选择符组合。

　　例如，段落标签P、类选择符.test及ID选择符#title共同定义了颜色为红色并且大小为20它的文字 。

<style type="text/css">
p,.test,#title
{
    font-size:20px;
    color:red;
}
</style>
<p class="test">p标签内文字，类名为test</p>
<div class="test">div里面的文字，类也为test</div>
<span class="test">span里面的文字，类也为test</span>
<p>p标签，没有类</p>
<h3 id="title">h3里面文字，ID为title</h3>
<span>span不改变颜色</span>
<div>div不改变颜色</div>

效果如图：

 

在选择符群组中，每个选择符之间使用英文的逗号（提醒一下：输入法半角状态下的逗号） 隔开，选择符之间的关系为并列关系。

四、选择符的组合，根据HTML的结构关系，层层递进的罗列选择符，目标选择符为最后的一个选择符。每个选择符之间 使用空格分开且它们的关系为父子关系。

　　假如在CSS中使用选择符组合定义段落标签P中的子标签SPAN，即为：

 

p span{color:Blue;}

选择符总结：

　　介绍了这么多，我画了张图供各位参考一下：