CSS-选择器及其兼容性 web前端开发

标签选择器就是用标签名来当做选择器。
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+FirefoxChromeSafariOpera

类选择器(.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+FirefoxChromeSafariOpera

后代选择器( X Y)

空格就表示后代，.div1 p 就是.div1的后代所有的p。
强调一下，选择的是后代，不一定是儿子。
空格可以多次出现。

.div1 .li2 p{ color:red; }

选择的就是.div1里面的后代.li2里面的p。
当要把某一个部分的所有的什么内容，进行样式改变，就要想到后代选择器。
兼容性

IE6+FirefoxChromeSafariOpera

交集选择器

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的儿子

不能选择：

我是div的重孙子

例如 div#container > ul { border: 1px solid black; }

X Y和X > Y的差别就是后面这个指挥选择它的直接子元素。看下面的例子：

List Item Child List Item List Item List Item

#container > ul只会选中id为

’
container’

的div下的所有直接ul元素。它不会定位到如第一个li下的ul元素。
由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在javascript中使用css选择器时候是强烈建议这么做的。
兼容性

IE7+FirefoxChromeSafariOpera

序选择器选择第1个li：

选择最后一个1i：

ul li:last-child{ color:blue; }

由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

项目项目项目项目项目项目项目项目项目项目

用类选择器来选择第一个或者最后一个：

ul li.first{ color:red; } ul li.last{ color:blue; }

IE8开始兼容；IE6、7都不兼容
下一个兄弟选择器 +表示选择下一个兄弟

选择上的是h3元素后面紧挨着的第一个兄弟。

我是一个标题我是一个段落我是一个段落我是一个段落我是一个标题我是一个段落我是一个段落我是一个段落我是一个标题我是一个段落

IE7开始兼容，IE6不兼容。
CSS的继承性和层叠性继承性
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
能继承的属性：color、 text-开头的、line-开头的、font-开头的。
这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。继承性是从自己开始，直到最小的元素。
层叠性
就是css处理冲突的能力。所有的权重计算，没有任何兼容问题！
权重问题大总结：
1）先看有没有选中元素，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听样式后写的为准。
2）如果没有选中，那么权重是0。如果大家都是0，就近原则。