如何理解CSS層疊樣式-css教學-PHP中文網

首頁

web前端

css教學

如何理解CSS層疊樣式

清浅

Feb 28, 2019 am 11:40 AM

CSS層疊性就是瀏覽器處理衝突的特性，在CSS層疊樣式衝突中有引用方式衝突，繼承方式衝突，指定樣式衝突。當指定樣式和繼承樣式偵錯發生衝突以指定樣式衝突為準

CSS具有三大特性分別為繼承、優先權和層疊。今天要介紹的是CSS三大特性中的層疊性，具有一定的參考價值，希望對大家有所幫助

如何理解CSS層疊樣式

##【推薦課程：CSS教學】

#CSS層疊性

CSS層疊性就是瀏覽器處理衝突的一個特性，如果一個屬性中設定了多個選擇器，那麼這個時候只會有一個選擇器起到作用，其他的選擇器都會被層疊的部分去除。

層疊性的條件

（1）元素相同

（2）屬性相同

（3）優先權相同

層疊性的樣式衝突

（1）引用方式衝突

CSS的引用方式包含內聯樣式、內嵌樣式、匯入樣式、連結樣式，四個的優先權順序分別是內嵌樣式>內嵌樣式>導入樣式>連結樣式

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" src="style.css">
<style>
	body{
		background-color: pink;
	}
</style>
<body>
	<h1 style="background-color: red">优先级</h1>
</body>
</html>

登入後複製

效果圖如下：

如何理解CSS層疊樣式

（2）繼承方式衝突

在CSS中有一些屬性當給自己設定時會連帶著自己的後代都繼承上該屬性值，例如CSS中設定顏色，字體大小，字體形狀，對齊等等這些屬性就會繼承。但是有關於盒子，定位，佈局等屬性就不會發生繼承

繼承方式衝突就是顯示跟自己最近的父元素而不是所有的父元素

例：

<style type="text/css">
		body{
			color: pink;
		}
		#father{
			color: red;
		}
		#grandfather{
			color: blue;
		}
	</style>
</head>
<body>
	<div id="grandfather">
		<div id="father">
			<div>
				<h1>继承冲突</h1>
			</div>
		</div>
	</div>

登入後複製

效果圖如下：

如何理解CSS層疊樣式

（3）指定樣式衝突

有時候我們在給元素指定樣式時會因為權重的不同而產生衝突。這裡還要注意只有當權重相同時,才會根據「後來居上」原則

<style type="text/css">
		body{
			color:black;
		}
		.father{
			color:yellow;
		}
		#son{
			color:green;
		}
	</style>
</head>
<body>
	<div id="son" class="father">
		<h1>继承冲突</h1>
	</div>
</body>

登入後複製

效果圖如下：

Image 080.png