您的位置:首页 > Web前端 > css

css选择器优先级

更多 2016/1/9 来源:css学习浏览量:1525
学习标签: css
本文导读:CSS选择器优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先,选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 。虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余。

一、css选择器优先级

important > 内联 > ID > 类| 伪类| 属性选择 > 标签 | 伪元素 > 通配符 > 继承

例如

1、仅一个选择器单词的时候#id高于.class;
2、div#test2比#test2多了一个单词,那么多一个单词的优先级高;
3、同样多一个单词,但其中一个有#id选择,则#test3要高于div .test3;
4、.body #test4高于body #test4,同样多层级时,.class高于tag;
5、html #test5与body #test5有同样的优先级,先写的会被覆盖;
6、#body #test6高于.html #test6;
7、html #body #test7高于.html .body #test7;
8、#html.html .body #test8与.html #body.body #test8同级。

 

二、CSS选择器的效率从高到低

1、id选择器(#myid)

2、类选择器(.myclassname)

3、标签选择器(div,h1,p)

4、相邻选择器(h1+p)

5、子选择器(ul < li)

6、后代选择器(li a)

7、通配符选择器(*)

8、属性选择器(a[rel="external"])

9、伪类选择器(a:hover,li:nth-child)

 

收藏
365
很赞
478
您可能感兴趣