HTML+CSS 輕鬆入門之層疊

如果在html檔案中對於同一個元素可以有多個css樣式存在並且這多個css樣式具有相同權重值怎麼辦？好，這一小節的層疊幫你解決這個問題。

層疊就是在html檔案中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>层叠</title>
	<style type="text/css">
		h1{
			color:green;
		}
		h1{
			color:red;
		}
	</style>
</head>
<body>
	<h1>php 中文网</h1>
</body>
</html>

最後h1 中的文字會設定為red，這個層疊很好理解，理解為後面的樣式會覆蓋前面的樣式

所以前面的css樣式優先權就不難理解了：

內聯樣式表（標籤內部）> 嵌入樣式表（目前文件中）> 外部樣式表（外部文件中）。

新建檔案

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>层叠</title>
	<style type="text/css">
		h1{
			color:green;
		}
		h1{
			color:red;
		}
	</style>
</head>
<body>
	<h1>php 中文网</h1>
</body>
</html>

提交重置程式碼

自動運行

全螢幕