[你必须知道的css系列]第一回：丰富的利器选择符尾话
在CSS中除了常规的选择符的使用以外，还有两个比较特殊的对属性操作的选择符方式，这就是这篇要介绍的“伪类”，“伪对象”。
一、伪类
伪类可以用来指定一个或者多个与其相关的选择符的状态，伪类的形式为：选择符：伪类{属性：属性值;}
例如，下面我们设置锚点标签a的几种状态
a:visited{color:Blue;}
a:hover{color:Blue;}
a:active{color:Black;}
伪类可以让用户在使用页面的过程中增加更多交互效果，而不必去使用过多的JS来辅助完成。
例如：当我要使输入框获得焦点时的背景色为黑色，我可以这样写：
{
background-color:Black;
}
<input type="text" value="" />
所以当我们鼠标移过文本框时就会出现黑色背景。提醒一下，该死的IE6和IE7对伪类支持得太有限了。所以CSS中我认为最好玩的一部分也就黯淡无谓了。
二、伪对象
伪对象是在HTML的文档指定的信息之外，创建了文档的额外信息。例如，在段落标签P的前后添加文字信息等。
伪对象的形式为：选择符：伪对象{属性：属性值;}
这里要说一下，伪对象跟伪类一样，在IE6和IE7下面支持得太有限了。这里我可以通过FF来展示下伪对象的强大之处。
例如：这边为段落标签P的信息补充文字信息：
p:before{content:"4月13号";}
p:after{content:"今天星期二";}
</style>
<p>ssssssssssssssssssss</p>
来看一下效果：
IE6,7下效果
FF,IE8下效果
可以看到IE8以前的版本因为不支持伪对象，所以只显示了P中的文字。
这边伪对象就先介绍到这里，后面的话会介绍一些比较实用的伪类伪对象，其它的你可以查查CSS的手册。
关于选择符最后的一些话：
css我之前就说了翻译过来叫层叠样式表，所以其特色就在于层叠。所谓层叠即表示CSS会根据选择符的使用而将样式相互叠加或者覆盖。选择符之间藕断丝连的关系往往让我们许多人觉得难以处理，但如果我们能很好的掌握它，会发现其实也就那么回事。
1.选择符的覆盖
看一段代码：
span
{
color:Red;
}
</style>
这么简单的一段代码估计谁都知道什么意思，span里面的内容会变成红色的。
改现在我改成：
span
{
color:Red;
}
span
{
color:Blue;
}
</style>
在下面再次定义了一下span标记的颜色，前面的就被后面的覆盖掉了。在我们日常开发中可能有一种用法就是：先将所有元素的内外补丁都设为0，然后根据实际的用法再次定义内外补丁的间距。
*
{
margin:0;
padding:0;
}
.clear
{
margin:10px 0 10px 0;
}
</style>
2.选择符Z的继承
“子承父业”不仅在我们的社会中表现，在CSS中也存在着。当我们在CSS中定义body的文字或颜色时，那body的所有子元素都将继承body中的相关定义。
如：
body
{
font-size:20px;
}
div
{
color:Blue;
}
</style>
显示效果不用我截图了。div里面的字体以20PX显示，且绿色。
说一下，并不是所有的后代标签都会继承父级元素的CSS属性，例如：标题标记h1-h6这6个标签将会使用浏览器的默认样式设置的文字大小。body再怎么定义对它都不管用。
掌握选择符继承的特性，灵活利用将会对后期编写CSS带来许多的便利，节约开发的时间。因此在编写CSS代码之前，我们通常要做的就是利用CSS的继承我对整个页面进行统筹规划、细致分析，以优良的CSS代码实现页面的而已及样式。
3.选择符的权重和优先级别
即使在不太复杂的样式中，也可能有两个或者更多的选择符同时定义一个标签元素。如果这些选择符中声明的属性不同也就罢了，如果声明的属性和相同，而设置的属性值不同该怎么办，这时候就要考虑到选择符的权重及优先级别。
CSS给每个选择符都分配一个权重值，我们可以将网页定义的样式分为4种：HTML,编写者，用户，浏览器。HTML表示在HTML中使用的样式;编写者表示CSS文件的编写人员;用户也就是浏览器网页的用户所设置的样式;浏览器也就是浏览器的默认样式。
为了让用户对样式有更多的控制能力，可以对属性设置!important关键字声明，提升属性的权重值。添加!important关键字声明的属性在优先级别中是最高的。
来看一下，CSS样式所采用的优先顺序：
-
标有!important关键字声明的属性。
-
HTML中CSS样式属性。
-
工程师编辑的CSS文件样式属性。
-
用户设置的样式。
-
浏览器默认样式。
代码
p{color:Red;}
p.myColor{color:Black;}
.myColor{color:Yellow;}
#myColor{color:Blue;}
</style>
p>ssssssssssssssssssss</p>
<p class="myColor">sssssssssssssssssss</p>
<p id="myColor" class="myColor">ssssssssssssssssssss</p>
<p style="color:Green" class="myColor" id="myColor">sssssssssssssssssssssss</p>
上面代码显示如下：
呵呵，上面的截图就是同一个标签使用不同样式定义的方法，显示的效果。估计初学的人会有点摸不着头脑，搞不懂为什么同一个P所显示的效果会不同呢。其实这些都不是问题，你只要记住下面的这个优先级值就可以。
标签选择符、伪类及伪对象：优先级值为1。
类选择符、属性选择符：优先级值为10。
ID选择符 ：优先值为100。
style属性：优先级值为1000。
其它的如通配符等：优先级值为0。
根据上面的原则，统计出CSS样式表中出现的每个选择符个数，再相加，最终得出的值就是某个选择符的优先级别。
如上面的这个例子：
- p=1
- p.myColor=1+10=11
- .myColor=10
- #myColor=100
- style="color:red;"=1000
现在再看哪个应用于哪个是不是比较直观了呢。
对了再提一下 !important关键字，它的优先级别是最高的，而这个并没有放在优先级值计算中。
这边大家可以自己动手试一下，在代码中加一个!important看看会有什么效果。!important关键字的优先级最高，所有用的时候一定要谨慎。
好了关于选择符这就是一个终结了！就讲到此为此吧！这第一回总算完成了。接下来就开写第二回吧。名字还没想好。
还是那句话：有什么问题还是直接给我留言。
你必须知道的css系列-第一回
[你必 须知道的css系列]第一回：冠冕堂皇：CSS的作用及其基本结构
[你必 须知道的css系列]第一回：丰富的利器：CSS选择符之通配符、类选择符、包含选择符、ID选择符
[你必 须知道的css系列]第一回：丰富的利器2：CSS选择符之子选择符、相邻选择符
[你必 须知道的css系列]第一回：丰富的利器3：CSS选择符之属性选择符[你必 须知道的css系列]第一回：丰富的利器终结篇：选择符的组合关系及选择符总结
[你必须知道的css系列]第一回：丰富的利器尾话
