CSS三种导入方式真的是内联样式>嵌入式>外部式吗?

231 阅读2分钟

先说结论

优先级不是 内联样式>嵌入式>外部式 这样子排列的

css这是最基础的理论知识,老师讲课的时候就说的是内联>嵌入>外部。后来实践发现也不尽然是这样子的

优先级

第一是内联式,这是毋庸置疑的。那么嵌入式和外部式的优先级呢?

第一种导入顺序

外部css在前,也就是link在前,style在后。这样符合大部分程序员的操作习惯。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="importCss.css">
  <style>
    #three {
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <p>第一种导入方式</p>
    <p>第二种导入方式</p>
    <p id="three">第三种导入方式</p>
  </div>
</body>
</html>

importCss文件

#three {
  color: blue;
}

注意我这次导入的css是在style前面的。这样下来style的样式会对importCSS里面颜色进行重写,也就是覆盖,所以最终的文字的颜色是红色。

这样也符合大部分用户的的导入顺序,外部css在前,内部在后,所以就是结论,嵌入式>外部式

第二种导入顺序

外部css在后,嵌入式在前。这样代码在执行的时候,外部css会对文字颜色进行重写,造成颜色是蓝色。结论是:外部式>嵌入式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #three {
      color: red;
    }
  </style>
  <link rel="stylesheet" href="importCss.css">
</head>
<body>
  <div>
    <p>第一种导入方式</p>
    <p>第二种导入方式</p>
    <p id="three">第三种导入方式</p>
  </div>
</body>
</html>

问题虽小,也是最基础的。但是不一定是老师讲的就是对的,重在思考!