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 继承
初学者(例如我)会将这个概念和优先级混淆(好像也没什么可比性)...
继承是指对一个元素应用了样式,那么某些属性会被后代元素默认的应用.最常用的就是字体等属性.
继承于优先级的合理运用,将会使你的文档相当的骠悍 hoho```
说道这里,停,本文技术含量不高,扫盲贴呵呵.