CSS样式覆盖顺序

• 内部style标签里的样式和外联link的css文件的样式其实是同等优先级的，关键就是看谁在下，优先级就高。下面的样式会覆盖上面样式里出现过的样式。

• 如果css里又引用了一个另外的css，也就是css的头顶上写了一个 @import "xxx.css"，则先加载这个css里面的内容，再加载本css里面的内容，所以如果有重复的话，后加载的会覆盖以前的。

• 如果有多个css引用了很多个二级css，很多二级css都引用了三级css，构成了一个树结构，那么加载（覆盖）顺序就是（文件行）从上到下，深度优先遍历的顺序。

• 用js赋予某个元素样式是赋予该元素的内联样式，优先级比较高

• 如果多个script代码，会按照从html文件里从上往下的顺序算，但是不能先于元素标签出现。

• 如果要先于元素标签出现的位置写js代码，给该元素赋样式，外面要用 onload包起来

  window.onload = function () {
      let a1 = document.querySelector(".a1");
      a1.style.setProperty("color", "yellow", "important");
      console.log("end");
  }
  

• 还可以用延迟设置来覆盖加载完毕的js赋予的样式

  setTimeout(() => {
      let a1 = document.querySelector(".a1");
      a1.style.setProperty("color", "red", "important");
      console.log("end red");
  }, 1); // 延迟0.001s后 覆盖以前的样式
  

  这从时间角度来看，也算是一种覆盖吧。