css选择器优先级

css选择器优先级

一、css选择器优先级

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

例如

1、仅一个选择器单词的时候#id高于.class；
2、li#test2比#test2多了一个单词，那么多一个单词的优先级高；
3、同样多一个单词，但其中一个有#id选择，则#test3要高于li .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、标签选择器（li,h1,p）

4、相邻选择器（h1+p）

5、子选择器（ul < li）

6、后代选择器（li a）

7、通配符选择器（*）

8、属性选择器（a[rel="external"]）

9、伪类选择器（a:hover,li:nth-child）