css选择器、权重

基础选择器

一、标签选择器

p{。。。}  h1{…..}   css不区分大小写，建议小写

1、所有的标签都可以作为标签选择器去使用

2、无论这个标签藏多深，一定能够被选上

3、选择页面所有的，而不是具体某一个；

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。 

二、id选择器

所有的标签都可以有id属性来标识标签。

Id属性的值：

1）只能是数字字母下划线，必须以字母开头 ，不能和标签同名。

2）一个页面中不能出现相同的id，哪怕他们不是一个类型。

具有唯一性

id的优先级大于class

三、类选择器

.就是类的符号。类的英语叫做class，任何标签都可以有class属性

1）class属性是可以重复的，2）同一个标签可以同时属于多个类选择器，切记，一个标签内不能出现两个同名属性

1、在开发时，尽量不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。

2、 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

到底用id还是用class？

答案：尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

Css高级选择器

一、后代选择器

空格就表示后代，如：div1 p{}选中div1的后代所有的p。

强调一下，选择的是后代不一定是儿子。

后代选择器就是一种平衡：共性、特性的平衡，共性中的特性。当要设置某一部分整体样式时，可以使用后代选择器。

后代选择器描述的是祖先结构

二、交集选择器

h3.special{

    color:red;

}

选择的元素是同时满足两个条件：必须是h3标签，然后是special。

一般标签放在前面。交集选择器没有空格。

三、并集选择器（分组选择器）

用逗号表示并集。

例：h3,li{

     color:red;

}

四、通配符*

*就表示所有元素。效率不高，尽量要少用

五、儿子选择器

IE7开始兼容，IE6不兼容

>号

六、序选择器

IE8开始兼容；IE6，7不兼容

序选择器指first-child和last-child

ul li:first-child{

        color:red;

        }

ul li:last-child{

             color:blue;   }

七、下一个兄弟选择器

IE7开始兼容，IE6不兼容

+表示选择下一个兄弟

h3+p{

      color:red;

    }

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

选择器可以组合使用。

继承性

当给自己设置样式时，自己的后代都继承上了，这个就是继承性

哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。

继承性是从自己开始，直到最小的元素。

层叠性

层叠性就是css处理冲突的能力。所有的权重计算，没有任何兼容问题！

当选择器，选择上了某个元素的时候，那么要这么统计权重：

id的数量，类的数量，标签的数量

百位             十位                    个位

不进位，实际上能进位（255个标签等于一个类名）但没有实际意义！

当权重相同时，谁在后以谁为准。

如果不能直接选中某个元素，通过继承的，权重值为0，

如果权重值都为0时，也就是继承来的，那么就按就近原则，谁描述的近，听谁的。             并集选择器权重要拆开计算，

权重问题大总结：

1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。

2） 如果没有选中，那么权重是0。如果大家都是0，就近原则。

权重问题深入

一、一个标记可以携带多个类名，标签样式并不是和类名顺序有关，而是和css样式书写顺序有关、

二、！important标记

1）！important是给标记属性添加权重，（无穷大）

font-size:60px !important;

注意：增加的属性的权重值，而不是选择器、

2）无法提升继承的权重

3）!important不影响就近原则

如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？

答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。

三、权重问题总结

原文：http://www.cnblogs.com/ljxblog/p/5689541.html