CSS 繼承性和層疊性

繼承性

有一些屬性，當給自己設定的時候，自己的後代都繼承上了，如color、text-開頭的、line-開頭的、font-開頭的。

type
="text/css"
>
divstyle
>
head
>
>
>
>
我是段落p
>
>
我是段落p
>
>
我是段落p
>
div>
body
>

不是所有屬性都能夠繼承，如上圖，color屬性會被繼承，但border屬性沒有被全部繼承。總結：關於文字樣式的都能夠繼承，關於盒子、定位、布局的屬性都不能繼承。

如果我們頁面的文字都是灰色，都是14px，那麼就可以利用繼承性：

body

繼承性是從自己開始，直到最小元素。

如：

type
="text/css"
>
divstyle
>
head
>
>
>
>
>
我是文字
>
我是文字
>
>
>
href="
">
我是文字
a>
span
>
li>
ul>
div>
div>
div>
div>
body
>

層疊性即處理衝突的能力

我到底是什麼顏色？

以上句子是綠色。


"hezi1" id="box1">
"hezi2" id="box2">
"hezi3" id="box3">
我到底是什麼顏色？

以上句子是紅色。

繼承或者*的貢獻值：

每個元素（標籤）貢獻值為0,0，0,1

每個類，偽類貢獻值為0,0，1,0

每個id貢獻值為0,1，0,0

每個行內樣式貢獻值1,0，0,0

每個!important貢獻值∞無窮大

解析：

乙個id選擇器，乙個類選擇器，乙個標籤選擇器，記作1,1,1

乙個id選擇器，0個類選擇器，三個標籤選擇器，記作1,0,3

0個id選擇器，3個類選擇器，4個標籤選擇器，記作0,3,4

當選擇器選擇上了某個元素時，要分別數一下id選擇器、類選擇器和標籤選擇器的數量。按照稀有程度，id的權重大於類，類大於標籤。

如果權重一樣，則以後者為準，由於p標籤在後，所以是紅色：

如下所示，第乙個選擇器的權重是0,0,13，第二個選擇器的權重是0,1,0。不進製，所以是藍色：

我到底應該是什麼顏色嗷嗷嗷

如下所示，權重一樣，則以後出現的那個為準，所以是藍色：

那我到底是什麼顏色啊

如下所示，這樣的話依然是紅色，因為第乙個選擇器權重是0,1,2，第二個選擇器權重是0,1,0：

如下所示，p標籤應該是藍色，因為如果不能直接選中某個元素，而是通過繼承性影響的話，則權重是0：

哈哈哈哈

在開始數權重之前，一定要看是不是真的選中了文字所在的最內層標籤，如果不能直接選中某個元素，而是通過繼承性影響的話，那麼權重是0。如下所示，沒有選中p，所以權重為0，應是綠色：

猜我啥色

html內容不變，css選擇器變成如下所示，則是黃色：

hezi1、hezi2只描述到了倒數第三層，而hezi3描述到了倒數第二層，hezi3描述的更接近。

總結：先看有沒有選中，如果選中了，那麼以（id數，類數，標籤數）來計權重，誰大聽誰的，如果都一樣，則以後寫的為準。如果沒有選中，那麼權重是0。如果大家都是0，那麼無需數標籤數量，無需看誰是後寫的，只需遵循則就近原則。

css有兩大特性繼承性和層疊性物件導向語言都會存在繼承的概念，在物件導向語言中，繼承的特點繼承了父類的屬性和方法。那麼我們現在主要研究css，css就是在設定屬性的。不會牽扯到方法的層面。繼承給父級設定一些屬性，子級繼承了父級的該屬性，這就是我們的css中的繼承。記住有一些屬性是可以繼承下...

css有兩大特性繼承性和層疊性繼承性繼承給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承,需要注意的是有一些屬性是可以繼承下來的 color font text line 主要是文本級的標籤元素像一些盒子元素屬性,定位的元素浮動,絕對定位,固定定位不能繼承層疊性...