1、學過Java和C++的都注意到，屬於父親的protected欄位或方法肯定會被孩子所繼承，而CSS也具備此特性，看下面的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS的繼承性示範</title>
<style type="text/css">
body
{
color:red;
}
</style>
</head>
<body>
<div>
CSS的繼承性示範
<ul>
<li>首頁</li>
<li>簡介</li>
<li>聯絡</li>
</ul>
</div>
</body>
</html>
2、對於這個HTML來講，div是body的兒子，ul是div的兒子，li是ul的兒子，無論div、ul還是li均是body的後代，其層次關係如：
body
|
|——div （其內容：CSS的繼承性示範）
|
|——ul
|
|——li （其內容：首頁、簡介、聯絡）
3、對於這個檔案定義了一個body標記選取器，把顏色值設定為紅色，如下：
body
{
color:red;
}
4、使用瀏覽器開啟這個html檔案，會發現無論是div的內容(CSS的繼承性示範)還是li的內容（首頁、簡介、聯絡）均是以紅色字型顯示，這也說明body的後代自動繼承了它的特性。
5、HTML的效果如下，其中的虛框是div的範圍：
二、層疊特性：
1、網頁中的某個元素很有可能會被若干個選取器所修飾，這樣就造成了選取器的衝突，那麼到底是以哪個選取器為準呢？只要記住如下優先順序即可：行內選取器 > ID選取器 > 類別選取器 > 標記選取器
2、舉例：
（1）定義mycss.css檔案
.red
{
color:red;
}
.purple
{
color:purple;
}
#blue
{
color:blue;
}
#yellow
{
color:yellow;
}
（2）定義myhtml.htm檔案，部分主要內容如下：
<head>
<link href="mycss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>這是一個文本</p>
<p class="red">這是帶類別選取器的文本</p>
<p id="blue" class="red">這是帶ID和類別選取器的文本</p>
<p style="color:orange;" id="blue">這是帶行內和ID選取器的文本</p>
<p class="purple red">這是帶兩個類別選取器的文本</p>
<p id="yellow red">這是帶兩個ID選取器的文本</p>
</body>
（3）效果：
（4）解釋：
第一個P沒有使用選取器，所以採用HTML預設的顯示顏色（黑色）
第二個P使用了類別選取器，所以優先採用類別選取器的顏色（紅色）
第三個P使用了ID和類兩個選取器，由於ID選取器的優先順序高於類別選取器，所以顏色顯示為藍色
第四個P使用了行內選取器和ID選取器，由於行內選取器優先順序高於ID選取器，所以顏色顯示為黃色
第五個P同時使用了兩個類別選取器，瀏覽器在解釋網頁時以第一個類別選取器定義的顏色為準，所以顏色顯示為紫色
第六個P同時使用了兩個ID選取器，但由於ID選取器只能同時用於一個標記且全域唯一，所以瀏覽器認為這是一個非法的，顏色以其預設值顯示（黑色）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
