CSS 选择器的兼容性
参考网站
http://blog.csdn.net/yume_sola/article/details/70215695
http://www.youdiancms.com/jianrong/614.html
标签选择器
就是用标签名来当做选择器。
1 、所有标签都能够当做选择器，比如body、h1、dl、ul、span等等
2 、不管这个标签藏的多深，都能够被选择上。
3 、选择的是所有的，而不是某一个。所以是共性，而不是特性。
希望页面上所有的超级链接都没有下划线：
a{
/*去掉下划线：*/
text-decoration: none;
}id选择器（#X)
#表示选择id，在选择器中使用#可以用id来定位某个元素。然后使用的时候需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？
id选择器是很严格的并且你没办法去复用它。
#pp{
color:black;
}(1）任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线。大小写严格区别，a和A是两个不同的id。
( 2）同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。
也就是说，如果有一个p的id叫做p1，这个页面内，其他所有的元素的id都不能叫做p1。
兼容性
IE6+
Firefox
Chrome
Safari
Opera
类选择器(.X)
.p {
color: red;
}总结：
( 1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
( 2） 同一个标签可以同时携带多个类
这是个class选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。
( 3） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
( 4） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
( 5 )尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。
兼容性
IE6+
Firefox
Chrome
Safari
Opera
后代选择器( X Y)
<style type="text/css">
.div1 p{
color:red;
}
</style>空格就表示后代，.div1 p 就是.div1的后代所有的p。
强调一下，选择的是后代，不一定是儿子。
空格可以多次出现。
.div1 .li2 p{
color:red;
}选择的就是.div1里面的后代.li2里面的p。
当要把某一个部分的所有的什么内容，进行样式改变，就要想到后代选择器。
兼容性
IE6+
Firefox
Chrome
Safari
Opera
交集选择器
h3.special{
color:red;
}选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。
交集选择器没有空格。所以有没有空格div.red和div .red不是一个意思。
注意：交集选择器，我们一般都是以标签名开头，比如div.haha 比如p.special。
并集选择器（分组选择器）
h3,li{
color:red;
}用逗号就表示并集。
儿子选择器(X>Y)
IE7开始兼容，IE6不兼容。
div>p{
color:red;
}div的儿子p。和div的后代p的截然不同。
能够选择：
<div>
<p>我是div的儿子</p>
</div>不能选择：
<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>例如
div#container > ul {
border: 1px solid black;
}X Y和X > Y的差别就是后面这个指挥选择它的直接子元素。看下面的例子：
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>#Container > ul只会选中id为’container’的div下的所有直接ul元素。它不会定位到如第一个li下的ul元素。
由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在JavaScript中使用css选择器时候是强烈建议这么做的。
兼容性
IE7+
Firefox
Chrome
Safari
Opera
序选择器
选择第1个li：
<style type="text/css">
ul li:first-child{
color:red;
}
</style>选择最后一个1i：
ul li:last-child{
color:blue;
}由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
<ul>
<li class="first">项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li class="last">项目</li>
</ul>用类选择器来选择第一个或者最后一个：
ul li.first{
color:red;
}
ul li.last{
color:blue;
}
IE8开始兼容；IE6、7都不兼容
下一个兄弟选择器
+表示选择下一个兄弟
<style type="text/css">
h3+p{
color:red;
}
</style>选择上的是h3元素后面紧挨着的第一个兄弟。
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>IE7开始兼容，IE6不兼容。
CSS的继承性和层叠性
继承性
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
能继承的属性：color、 text-开头的、line-开头的、font-开头的。
这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。继承性是从自己开始，直到最小的元素。
层叠性
就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！
权重问题大总结：
1） 先看有没有选中元素，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听样式后写的为准。
2） 如果没有选中，那么权重是0。如果大家都是0，就近原则。
下列都是IE6兼容的选择器：
p
#box
.spec
div.box
div .box
div , .box
*下列都是IE7开始兼容：
div>p
div+p下列都是IE8开始兼容：
div p:first-child
div p:last-child
