所謂層疊性是指多種css樣式的疊加，也就是說後面設定的樣式會層疊（覆蓋）之前的樣式，層疊性的前提是css的選擇器的優先順序相同，例如，當使用內嵌式css樣式表定義標記字型大小大小為12畫素，鏈入式定義標記顏色為紅色，那麼段落文字將顯示為12畫素紅色，即這兩種樣式產生了疊加。
1瀏覽器顯示的結果為長寬各為200畫素，背景色為綠色的div，原因是box中定義的背景色被wrap中定義的背景色覆蓋了doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>56
<
title
>css層疊性
title
>
7<
style
>
8.box
1314
.wrap
17style
>
18head
>
19<
body
>
20<
div
class
="box wrap"
>
2122
div>
23body
>
24html
>
通過瀏覽器的f12審查元素，也可以看出
>css繼承性
title
>67
<
style
type
="text/css"
>
8.parent
1516
.child
20style
>
2122
head
>
23<
body
>
24<
div
class
="parent"
>
25我是父div
26<
p>
27我是段落28p
>
2930
<
div
class
="child"
>我是子div
div>
31div
>
32body
>
33html
>
效果如下：
可以看到p標籤與子div都繼承了父div字型的顏色與大小，但是子div沒有繼承父div的寬高與背景色，
繼承的樣式實線字表示了出來，其他樣式虛化了。
注意：恰當地使用繼承可以簡化**，降低css樣式的複雜性。但是，如果在網頁中所有的元素都大量繼承樣式，那麼判斷樣式的**就會很困難，所以對於字型、文字屬性等網頁中通用的樣式可以使用繼承。例如，字型、字型大小、顏色、行距等可以在body元素中統一設定，然後通過繼承影響文件中所有文字。
定義css樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先順序的問題。這時元素顯示的是哪種樣式呢？
首先我們先給出乙個優先順序的結論：
下面來看例子，預設情況下，字型的顏色由瀏覽器的設定決定
當我們給body加上樣式之後，字型的顏色變為了紅色，說明繼承的樣式》瀏覽器預設樣式
當我們給加上萬用字元的樣式之後，字型顏色變為了灰色
說明萬用字元的樣式優於繼承的樣式，再試一下標籤選擇器的樣式優先順序
可見標籤選擇器的優先順序優於萬用字元的樣式，其他型別的樣式可以自行測試，其中!important可以改變樣式的權值
可以看到h1標題顯示的字型顏色為藍色，因為!important屬性可以提高樣式的權值，下面簡單說明下css的權值，css中每種樣式型別都有自己的權值
1、內聯樣式表的權值最高 1000；
2、id 選擇器的權值為 100
3、class 類選擇器的權值為 10
4、html 標籤選擇器的權值為 1
p /*注意：還有乙個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。有時候我們會在同一元素上應用不同的樣式規則，例如權值為1
*/p span /*
權值為1+1=2
*/.warning /*
權值為10
*/p span.warning /*
權值為1+1+10=12
*/#footer .note p /*
權值為100+10+1=111
*/
自學筆記 03 CSS
內部樣式表 使用style標記建立樣式時，最好寫在 外部樣式表 標籤匯入外部樣式表 stylesheet type text css href 目標檔案的路徑及檔名全稱 import匯入外部樣式表 link和import匯入外部樣式區別 內聯樣式表 行內樣式 嵌入式樣式 行內樣式表 標籤 style...
03 css形狀 css揭秘
形狀 一 自適應的橢圓 1.難題 1 圓 你可能注意到過，給任何正方形元素設定乙個足夠大的border radius，就可以把它變成乙個圓形。所用到的css 如下所示 1 bd 當任意兩個相鄰圓角的半徑之和超過border box 的尺寸時，使用者 必須按比例減小各個邊框半徑所使用的值，直到它們不會...
CSS基礎03 CSS字型屬性
css fonts 字型 屬性用於定義字型系列 大小 粗細 文字樣式 如斜體等 css使用font family屬性定義文字的字型系列。pstyle css使用 font size屬性設定字型大小 pstyle css使用 font weight屬性來設定字型粗細，屬性值有normal 正常字型，相...