1. 程式人生 > >CSS繼承性與層疊性

CSS繼承性與層疊性

繼小編上一篇對CSS的介紹,在學到繼承性與層疊性時小編覺得有必要對其單獨進行說明一下。

一、繼承性

這邊先舉一個例子來說(只取了關鍵部分):

<style type="text/css">
		div{
			color:blue;
			border: 2px solid red;
		}
	</style>
</head>
<body>
	<div>
		<p>我是段落</p>
		<p>我是段落</p>
		<p>我是段落</p>
	</div>

那麼我們看得到結果CSS中是對div進行樣式修改,div的後代同時也被CSS所修改這裡就看得到繼承性。

但不是所有的標籤都有繼承性這邊先介紹幾種最主要的,其他之後往後學的時候會遇見就知道。

具有繼承性屬性標籤:color,text-開頭,line-開頭,font-開頭的。

繼承性從大貫穿到到小。

二、層疊性

為什麼會有層疊性這一說,打個很簡單的比方來說,在我們對樣式進行操作時,當CSS中有多個選擇器選中一個標籤時修改了他的相同屬性時這時候被修改的元素應該聽誰的,這裡就涉及到了繼承性的問題,就是CSS處理衝突的一種能力。那麼下面來具體介紹,層疊性在實際作用上非常大,瞭解這個主要不是說我們要去找衝突,而是在實際運用上避免衝突,當然在介紹時為了直觀會去直接寫衝突來判斷優先順序。

1.首先說一個數權重的概念,以做判斷

當一個選擇器我們看到時就應該有一個數權重(權重在實戰上沒有後一位滿多少進一位之說)。

(id數,class數,標籤數)

當遇到衝突時落列出這樣一組數

然後進行比較先比較id,id比其餘大就不用往下比較了,依次類推,話不多說直接上例子。

按照概念來說<p>標籤中內容即為綠色。

我們這裡要注意權重不是怎樣的選擇器標題都有,有其的前提是選擇器定位到了所需修改的標籤位置,以這個題目做為例子來說的話,所舉的三個選擇器都定位到了所要修改的p標籤,所以才有權重的比較。

那麼當權重相同時我們取後面的選擇器,後出現的作為實現的。

2.如果在選擇器中不直接選中需修改元素的最基礎標籤則權重為0。

這裡取“誰近聽誰的”,所描述標籤離所需修改標籤最近的選擇器。

3.有時候會遇到並集選擇器,這樣的作比較時逗號前後分開理,不能算作一個。

這裡補充一個題目:

這個題目補充上了一個知識點,首先我們要明白上圖中兩種選擇器都選擇上了最裡層的div,因為選擇器是一種“非白即黑”的規則,這樣理解:拿上圖來說只要選擇器中有選擇到最裡層div的這種情況(從分析開來兩個選擇器都有可以指向最裡層div這種情況),那麼他就表示指向了最裡層div,選擇器看祖先結構。

那麼上面兩個選擇器都有權重,分析可知字型為藍色。

小結:我們只有知道問題是怎樣出現的才能知道怎樣去避免,所以這邊的介紹都是以實際比較去做的,希望對大家理解有所幫助。之後關於web的更多會持續更新。