Css Priority Note

css优先级的总结

1、一般来说，我们认知里的css优先级是id>class>div，也就是说，id选择器>class选择器>元素选择器，但这只能够大概做出比较，并不能很精准的判断元素到底按照哪种样式展示。

这里提到一个概念，就是继承。

“css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。”—-《CSS权威指南》

“声明”指的是：’color: red;’，”特殊性”既css优先级。

2、css优先级的详细计算：

1）ID选择器的优先级为：0，1，0，0；

2）class选择器、属性选择器以及伪类的优先级为：0，0，1，0；

3）元素和伪元素的优先级为：0，0，0，1；

4）通配符*的优先级为：0，0，0，0；

5）行间样式的优先级为：1，0，0，0；（比ID要高）

最后，!important的优先级最高，可以假定为1，0，0，0，0。

举例：

a{color: yellow;} /*优先级：0,0,0,1*/
div a{color: green;} /*优先级：0,0,0,2*/
.demo a{color: black;} /*优先级：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*优先级：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*优先级：0,0,2,0*/
#demo a{color: orange;} /*优先级：0,1,0,1*/
div#demo a{color: red;} /*优先级：0,1,0,2*/

这里补充一些其他的css知识：

1、关于页面内究竟能使用多少个link、style、import

实验结果：

1）IE6、7、8浏览器会有一个link标签数的上限是31，第32个link标签不起作用；

2）IE6、7、8的style标签的上限值也是31，第32个不起作用；

3）IE6、7、8的style标签和link标签混合使用的上限值也是31，第32个不起作用；

4）IE6、7、8的style标签内使用@import导入css文件时，第32个也不起作用；

5）IE6、7、8利用@import在某个css文件中导入其他css文件时，最大上限也是31，第32个不起作用；

6）IE6、7、8利用style标签加载30个或以下css文件，剩余的那个用link标签相当于第31个style标签，它最多导入导入31个css文件，第31个不起作用；

因此，如果在开发过程中，有以上几种方式引入css文件的数量过多会影响之后HTML内容的渲染，造成一些DOM对象未加载的错误，解决办法是对css文件进行打包，避免这种情况的发生；

附：

参考文档：css优先级计算规则;