HTML内嵌内联外联——它们之间的优先级如何？
準備工作
新建一個html文件敲入如下代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div><span>我是一個span標簽</span></div> </body> </html>運行初始界面（記住此頁面，方便清晰看到后面頁面發生的變化）： 這里只截一部分界面
------------------------------------------------------------------------------分------割-----線-------------------------------------------------------------------------------
1、內聯
什么樣子才叫內聯？
修改代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body style="background-color: pink;"><!-- 我在這里改變了body樣式 即加了一個背景顏色 --><div><span>我是一個span標簽</span></div> </body> </html>修改代碼后運行的界面：
------------------------------------> 這就叫內聯
------------------------------------------------------------------------------分------割-----線-------------------------------------------------------------------------------
2、內嵌
什么樣子才叫內嵌？
修改代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: blue; /*這里將body的背景顏色改為藍色（blue）*/}</style> </head> <body><div><span>我是一個span標簽</span></div> </body> </html>修改代碼后運行的界面：
------------------------------------> 這就叫內嵌
------------------------------------------------------------------------------分------割-----線-------------------------------------------------------------------------------
3、外聯
什么樣子才叫外聯？
修改代碼：
html里的代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./web.css"> <!-- 這里引入了外部css文件 --></head> <body><div><span>我是一個span標簽</span></div> </body> </html>新建一個css文件，代碼如下：
body{background-color: red; 這里將body的背景顏色改為紅色（red） }修改代碼后運行的界面：
------------------------------------> 這就叫外聯
------------------------------------------------------------------------------分------割-----線-------------------------------------------------------------------------------
4、內嵌、內聯、外聯之間的優先級
修改html里的代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./web.css"> <!-- 這里引入了外部css文件 --><style>body{background-color: blue; /*這里將body的背景顏色改為藍色（blue）*/}</style></head> <body style="background-color: pink;"><!-- 這里將body的背景顏色改為粉色（pink） --><div><span>我是一個span標簽</span></div> </bodystyle=> </html>css文件里的代碼：
body{background-color: red; 這里將body的背景顏色改為紅色（red） }運行后的界面：
得出他們之間優先級結論：內聯>內嵌、外聯
------------------------------------------------------------------------------分------割-----線-------------------------------------------------------------------------------
4.1 那么內聯和外聯之間的優先級關系呢？
修改html里的代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./web.css"> <!-- 這里引入了外部css文件 --><style>body{background-color: blue; /*這里將body的背景顏色改為藍色（blue）*/}</style></head> <body><div><span>我是一個span標簽</span></div> </body> </html>css文件里的代碼：
body{background-color: red; 這里將body的背景顏色改為紅色（red） }運行后的界面：
得出結論：內嵌的優先級一定大于外聯的優先級，可靠嗎？ 再往下看，尤其注意看上下html中<head></head>中的變化
------------------------------------------------------------------------------分------割-----線-------------------------------------------------------------------------------
修改html里的代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: blue; /*這里將body的背景顏色改為藍色（blue）*/}</style><link rel="stylesheet" href="./web.css"> <!-- 這里引入了外部css文件 --></head> <body><div><span>我是一個span標簽</span></div> </body> </html>css文件里的代碼：
body{background-color: red; 這里將body的背景顏色改為紅色（red） }運行后的界面：
得出結論：
內嵌、外聯引入css的優先級取決于誰離這個<body></body>標簽近，誰就高 。
外聯和內嵌誰寫在下面就會覆蓋上面的css 前提條件：選擇器（修改body–>修改body的背景顏色）使用是相同的！
總結
以上是生活随笔為你收集整理的HTML内嵌内联外联——它们之间的优先级如何？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 涉密计算机违规外联检查,涉密计算机违规外
- 下一篇： Arch Linux中的Pacman命令