css 样式加载次序

时间:2023-03-08 15:15:03
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会覆盖所有样式并且不会被任何样式覆盖(超级流氓),可以理解为样式锁死状态,除非确认样式不该改变,否则不建议使用