css常用选择器的组成

我们在使用css控制页面表现时,经常会出现这样的情况,定义混乱,明明指定了元素样式,样式却应用不上,很多时候,这些是因为对css选择器的片面理解造成的,本文将系统的描述css选择器的组成及使用规则,同时,也是对Lan天才同学CSS选择器优先级的数位计算法一文的简要补充.

css选择器的主要组成

1 通用选择器,

使用度不高,作用类似通配符,匹配所有元素.用" * "号表示,用来对也面上所有元素应用你所需要的样式.例如我们最最经常使用的:

*{padding:0; margin:0;}

这个样式规则实际上是说去掉浏览器默认的填充和边距上的空白.

2 标签选择器

(1)类型选择器 ,就是我们常用的"tag",      p{} a{}....

(2)后代选择器 ,    p li{} h2 span{}

3 常用

(1)Id选择器,    #Id{}....

(2)类选择器,        .class{}

用过滴都知道...不废话,只进行科学分类,进行知识体系化

对于选择器滴原则吗,个人觉得(犯过无数的错误之后)尽量不要出现不必要的Id以及class,如果没有这两个选择器的辅助就很难得到元素的时候,就要考虑是不是自己的结构出现问题,好的方法是在父级或者更高级别的元素应用Id...当然,具体要看实际情况.

4 伪类

主要是描述一些条件情况的样式.

a:visited.....

其中,:link,:visited,学名为链接伪类.....:hover,:focus等是动态伪类,据说可以应任何元素,其实不然,因为浏览器的差异.

FF支持,Ie6及以下版本,只有应用于链接元素的:active,:hover,:focus无效.

不赘述,概念问题.

5 高级选择器

(1)子选择器和相邻选择器

(2)属性选择器

以上由于Ie6及其以下版本并不支持,所以不多做描述,本人的应用也不多,但是如果css的这些扩展得到推广,相信将会大有裨益.

6 css优先级计算

这一部分Lan天才同学CSS选择器优先级的数位计算法 一文提供了非常充分的demo和讲解,在此只进行归纳和部分缺失内容补充.

(1)优先级.css的优先级算法规则如下:

以上的每一种选择器都被分配了一个优先级的数字值.将每个选择器的值加在一起,就得出了优先级.css的优先级并不是以10为基数,这一点要注意.为的是高级的选择器不会被海量的低级选择器冲淡优先级.

优先级被分成4个等级,a,b,c,d

行内样式(style="******"),a=1.

Id选择器的个数总和=b

类选择器,伪类选择器,属性选择器的总数量=c

类型选择器(tag)等选择器总数的总数量=d

特殊性的写法举例

style=""          1,0,0,0

#id1 #id2        0,2,0,0

#id1 .class1    0,1,1,0

p#id1             0,1,0,1

#id1               0,1,0,0

依次类推.........

注:如果有相同优先级的值,那么,后写的优先级高

7 继承

初学者(例如我)会将这个概念和优先级混淆(好像也没什么可比性)...

继承是指对一个元素应用了样式,那么某些属性会被后代元素默认的应用.最常用的就是字体等属性.

本文来自: 博客学堂(www.blog286.com ) 详细出处参考：http://www.blog286.com/css/20080101/010135392008.html