css 样式加载次序

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权（本人理解为：先加载1的样式，然后用2的样式覆盖1中的样式，3、4同理）

1. 浏览器缺省设置（浏览器默认的样式，不同浏览器的默认值可能不一样）
2. 外部样式表（引用的外部css文件，一般的格式为：<link rel="stylesheet" type="text/css" href="mystyle.css"> 。可以放到head 也可以放到body,据说放到body中的性能好一点）
3. 内部样式表（位于 head 标签内部，一般的格式为：<style> </style>。设置的样式只写就好了）
4. 内联样式（在 HTML 元素内部，例如：<p style=" color:red"></p> 或者<p color=red></p>）

在同一层样式中多重样式的优先次序如下，其中数字 6 拥有最高的优先权：（一般本人都是引用外部css文件，这里就以外部文件为例，即上面的2）

1. 通用选择器（*）   （一般格式为  *{margin:0;padding:0;} 。将全部元素的内外边框都设置成0）
2. 元素(类型)选择器  （一般格式为 p{color:red;} 。将所有p元素的字体都设置成红色)
3. 类选择器               （一般格式为  .text {color:red;} 。将所有class="text"元素的字体设置成红色。有时也会用p .text：只会重置<p>元素的)
4. 属性选择器            （一般格式为 a[href][title] {color:red;} 。将所有同时拥有【href】和【title】的<a>元素的体设置成红色)
5. 伪类                      （一般格式为 a:link {color:red;} 。将所有未访问的<a>元素的字体设置成红色)
6. ID 选择器              （一般格式为 #text {color:red;} 。将所有id="text"元素的字体设置成红色。有时也会用p #text：只会重置<p>元素的)

当然还会有规则破坏者!important：!important会覆盖所有样式并且不会被任何样式覆盖（超级流氓），可以理解为样式锁死状态，除非确认样式不该改变，否则不建议使用