先说结论
优先级不是 内联样式>嵌入式>外部式 这样子排列的
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>